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

Modify picture colour of button in WPF

提问by Walter Fabio Simoni

In a WPF application, i insert a button with a simple picture on background :

在 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>

I would like to, on Mouse Over, transforme the picture colour of the picture.

我想，在鼠标悬停，转换图片的图片颜色。

Here is the picture when mouse is out :

这是鼠标离开时的图片：

And when mouse is over, i would like a thing like this :

当鼠标结束时，我想要这样的事情：

I would like to do this dynamically (transforming the picture colour dynamicaly).

我想动态地执行此操作（动态转换图片颜色）。

Here is a try, but not complete :

这是一个尝试，但不完整：

<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>

Anyone could help me please ?

任何人都可以帮助我吗？

Thanks a lot,

非常感谢，

Best regards,

此致，

回答by sa_ddam213

You could just create the Contentas a Borderwith an Imageinside and change the BorderBackgroundusing a Triggeror Animation. It may also be a good idea to override the Buttontemplate if you just want to show the image style otherwise you will get the Buuttons focus style when the mouse is over.

您可以使用内部创建Contentas a并使用 a或更改。如果您只想显示图像样式，覆盖模板也可能是一个好主意，否则您将在鼠标悬停时获得按钮焦点样式。BorderImageBorderBackgroundTriggerAnimationButton

Example:

例子：

 <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>

Result:

结果：

Normal MouseOver

正常鼠标悬停

回答by Justin Pihony

Why not just set the button content to be the image that you want? That is probably the easiest way. Then, you can just change on mouse events. See this SO answer

为什么不将按钮内容设置为您想要的图像？这可能是最简单的方法。然后，您可以更改鼠标事件。看到这个答案

If you have an image that is the white magnifying glass only, with the rest of the image transparent then you should set the button content to be the image and set the background to be the color that you want (orange or black)

如果您的图像只有白色放大镜，而图像的其余部分是透明的，那么您应该将按钮内容设置为图像并将背景设置为您想要的颜色（橙色或黑色）

回答by Magnum

Sounds like you need to add a StoryBoard to your XAML. If you have a transparent image, why not simply change the fill color of the button?

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

I haven't tested the below code, but it is something you can use as a springboard.

我还没有测试下面的代码，但它是你可以用作跳板的东西。

<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>