在WPF中修改按钮的图片颜色

Question

在WPF应用程序中，我插入了一个背景带有简单图片的按钮：

<Button Grid.Column="2" BorderBrush="Transparent" HorizontalAlignment="Left" Height="20" Margin="15,0,0,0" VerticalAlignment="Center" Width="20">
    <Button.Background>
       <ImageBrush ImageSource="Divalto_Rechercher_25px.png" Stretch="Uniform"></ImageBrush>
    </Button.Background>
</Button>

我想，在鼠标经过时，将图片的颜色转换为图片的颜色。

这是鼠标不在的时候的图片：

​

​

当鼠标结束时，我想要一个这样的东西：

​

​

我想要动态地这样做(动态地转换图片的颜色)。

下面是一次尝试，但还没有完成：

<Button Grid.Column="2" BorderBrush="Transparent" HorizontalAlignment="Left" Height="20" Margin="15,0,0,0" VerticalAlignment="Center" Width="20">
  <Button.Background>
    <ImageBrush ImageSource="appbar.feature.search.rest.png" Stretch="Uniform"></ImageBrush>
  </Button.Background> 
    <EventTrigger RoutedEvent="Button.MouseEnter">
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation
                    Storyboard.TargetName="AnimBrush" 
                    Storyboard.TargetProperty="(SolidColorBrush.Color)"
                    From="Red" To="Green" Duration="0:0:5" 
                    AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Button>

有谁能帮我吗？

非常感谢,

诚挚的问候,

Answer 1

您可以将Content创建为一个内部带有Image的Border，然后使用Trigger或Animation更改Border Background。如果你只是想显示图像样式，那么覆盖Button模板可能也是个好主意，否则当鼠标移到上方时，你会得到Buutton焦点样式。

示例：

 <Button BorderBrush="Transparent" HorizontalAlignment="Left" Height="50" Margin="12,24,0,238" VerticalAlignment="Center" Width="51">
        <Button.Content>
            <Border CornerRadius="5">
                <Image Margin="3" Source="http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Search-icon.png" Stretch="Uniform" />
                <Border.Style>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="Background" Value="LimeGreen" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Red" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            </Border>
        </Button.Content>
        <Button.Style>
            <Style TargetType="{x:Type Button}" >
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}" >
                            <ContentPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
    </Button>

结果：

正常

MouseOver

​

Answer 2

为什么不直接将按钮内容设置为您想要的图像呢？这可能是最简单的方法。然后，您只需更改鼠标事件即可。See this SO answer

如果你有一个只有白色放大镜的图像，而图像的其余部分是透明的，那么你应该将按钮内容设置为图像，并将背景设置为所需的颜色(橙色或黑色)。

Answer 3

听起来您需要向您的XAML添加一个StoryBoard。如果你有一个透明的图像，为什么不简单地改变按钮的填充颜色呢？

我还没有测试过下面的代码，但是你可以把它当做跳板。

<EventTrigger RoutedEvent="Button.MouseOver">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="AnimBrush" 
            Storyboard.TargetProperty="(SolidColorBrush.Color)"
            From="Red" To="Green" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
 </EventTrigger>