主页 / coding / 问题 / 78983388
Accepted
Michael Foster
Asked: 2024-09-14 02:40:57 +0800 CST

如何在悬停时更改按钮图像的颜色

  • 772

我有一个如下所述的 WPF 按钮。该按钮有简单的图像和文本。该按钮是透明的，没有边框。当我将鼠标悬停在按钮上的任意位置时，我想

  1. 更改边框和背景颜色（有效）

  2. 更改文本颜色（有效）

  3. 添加效果或过渡来更改图像颜色。您可以看到我尝试使用 OpacityMask 来实现这一点，但没有成功。有什么建议或想法吗？

     <Button HorizontalAlignment="Center" VerticalAlignment="Top" Padding="6">
     <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
         <Image x:Name="MyImage" Source="Resources/icon-shape.png" HorizontalAlignment="Center" VerticalAlignment="Center" Width="32" Height="32"></Image>
         <Label Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}">Hello World</Label>
     </StackPanel>
     <Button.Style>
         <Style TargetType="Button">
             <!-- Set default border color -->
             <Setter Property="BorderBrush" Value="Transparent"/>
             <Setter Property="BorderThickness" Value="1"/>
             <Setter Property="Background" Value="Transparent"/>
             <Setter Property="Foreground" Value="#535353"/>

             <Style.Triggers>
                 <!-- Trigger for when the mouse is over the button -->
                 <Trigger Property="IsMouseOver" Value="True">
                     <Setter Property="Background" Value="#CDEAF7"/>
                     <Setter Property="BorderBrush" Value="#98D5ef"/>
                     <Setter Property="Foreground" Value="Red"/>
                   <!--  <Setter TargetName="MyImage" Property="OpacityMask">
                         <Setter.Value>
                             <SolidColorBrush Color="Green"/>
                         </Setter.Value>
                     </Setter> -->
                 </Trigger>
             </Style.Triggers>
         </Style>
     </Button.Style>
 </Button>

我认为 OpacityMask 应该与图像是相同的资源，然后我应该设置图像的背景颜色。但是，这很棘手，因为我需要它在我将鼠标悬停在整个按钮上时起作用，而不仅仅是在图像上。

wpf

1 个回答

  1. Best Answer

    https://learn.microsoft.com/en-us/dotnet/api/system.windows.setter.targetname?view=netframework-4.8#remarks

    您可以将此属性设置为应用 setter 集合（此 setter 所属的集合）范围内的任何元素的名称。这通常是包含此 setter 的模板内的命名元素。

    看这个例子：

        <Button HorizontalAlignment="Center" VerticalAlignment="Top" Padding="6">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image x:Name="MyImage" Source="Resources/icon-shape.png" HorizontalAlignment="Center" VerticalAlignment="Center" Width="32" Height="32">
                <Image.Style>
                    <Style TargetType="Image">
                        <Style.Triggers>
                            <!-- Trigger for when the mouse is over the button -->
                            <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}}"
                                         Value="True">
                                <Setter Property="OpacityMask">
                                    <Setter.Value>
                                        <SolidColorBrush Color="Green"/>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <Label Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}">Hello World</Label>
        </StackPanel>
        <Button.Style>
            <Style TargetType="Button">
                <!-- Set default border color -->
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Foreground" Value="#535353"/>

                <Style.Triggers>
                    <!-- Trigger for when the mouse is over the button -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#CDEAF7"/>
                        <Setter Property="BorderBrush" Value="#98D5ef"/>
                        <Setter Property="Foreground" Value="Red"/>
                        <!--<Setter TargetName="MyImage" Property="OpacityMask">
                            <Setter.Value>
                                <SolidColorBrush Color="Green"/>
                            </Setter.Value>
                        </Setter>--> 
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
    • 0

相关问题