wpf xaml 带有图像的按钮，在鼠标悬停时改变颜色如何响应触发器？

Question

在 wpf 中，xaml，我一直在尝试弄清楚如何在鼠标悬停时突出显示图像和按钮。我遇到了一些麻烦

它是导航栏、文本和图像的组合。

这是它应该的样子。

深色背景，当鼠标悬停时会改变颜色。我正在使用 devexpress，并尝试了不同的方法让它工作...

a) 网格解决方案一个网格，后面有一个图像和一个简单的文本按钮。尺寸固定...

但是当鼠标移到按钮上时，按钮会改变颜色，但图像不会改变颜色..
（如果我（或用户）单击图像，则不会在视图模型上调用任何命令。

 <Grid.Resources>
     <Style x:Key="navigationButtons" TargetType="StackPanel">
         <Style.Triggers>
             <Trigger Property="IsMouseOver" Value="True">
                 <Setter Property="Background" Value="#000000"/>
             </Trigger>
         </Style.Triggers>
      </Style>
   </Grid.Resources>

   <StackPanel Grid.Row="0"  Orientation="Horizontal">
        <Image  Source="..png" OpacityMask="White" Width="24" Height="24" Margin="32 20 16 20"/>
        <dx:SimpleButton />
    </StackPanel>

b) 带有图像和文本堆栈面板的堆栈面板..

a 堆栈面板，可能会被鼠标悬停和用户点击触发。
但是按钮的样式需要设置为不会对鼠标悬停产生任何影响，因为面板应该设置样式来处理

c) 带有包含图像和文本的按钮的堆栈面板..

按钮看起来不太好，因为图像和文本很难放在正确的位置。

<dx:SimpleButton Grid.Row="7" Width="328" Height="64">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="72"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" Source="../Properties/Images/Home.png" OpacityMask="White"/>
        <Label Grid.Column="1" Content="{x:Static res:Resource.Home}" />
    </Grid>
 </dx:SimpleButton>

这也没有真正解决我的问题... 有人知道吗？ - 送我正确的方向。我一直在研究样式，并认为它们在某处有解决方案..

多谢各位大神

Answer 1

使用下面的代码

<dx:SimpleButton Grid.Row="7" Width="328" Height="64">
   <StackPanel Grid.Row="0"  Orientation="Horizontal">
        <Image  Source="../Properties/Images/Home.png" OpacityMask="White" Width="24" Height="24"/>
        <Label Content="{x:Static res:Resource.Home}" />
    </StackPanel>
</dx:SimpleButton>

如果您没有从上面的代码中得到想要的结果，请使用下面的代码。 Containers 没有 mouseover 触发器，您应该使用 eventtrigger 代替。

<dx:SimpleButton Grid.Row="7" Width="328" Height="64">
 <Grid>
     <Grid.Style>
          <Style TargetType="Grid">
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.200" From="Transparent" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" FillBehavior="HoldEnd" To="#FF11FF22" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseLeave">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.200" From="#FF11FF22" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" FillBehavior="HoldEnd" To="Transparent" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Style.Triggers>
              </Style>
        </Grid.Style>
        <StackPanel Grid.Row="0"  Orientation="Horizontal">
            <Image  Source="../Properties/Images/Home.png" OpacityMask="White" Width="24" Height="24"/>
            <Label Content="{x:Static res:Resource.Home}" />
        </StackPanel>
    </Grid>
</dx:SimpleButton>

Answer 2

看起来你的问题是当你通过鼠标悬停时它的默认颜色使它不可读。你可以这样做

    <Button Content="Button">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Black"/> 
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

您必须设置适合您设计的Setter属性背景和前景色。

wpf xaml 带有图像的按钮，在鼠标悬停时改变颜色如何响应触发器？

wpf xaml Button with image, change color on mouse over how to respond to triggers?

wpf

xaml

triggers

styles