WPF Button with hot image - wpf

Question

<Button Margin="10,0,2,0" Width="90" Command="Open">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Content" Value="{Binding Source={StaticResource tstImage}}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Content" Value="{Binding Source={StaticResource tstImage1}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Content" Value="{Binding Source={StaticResource tstImage2}}"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I would like to create a button support hot image: When the mouse hover on the button, the image changes to another one.
I implement a button instance with above code. But actually I would like to create a template that every button can use this style. It is cumbersome to write the same style for every button.
I think it should like:
<Style TargetType="Button">
<Setter Property="Content" Value="{Binding Source= normalImage"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Content" Value="{Binding Source=hotImage"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Content" Value="{Binding Source=disableImage"/>
</Trigger>
</Style.Triggers>
</Style>
And then use the style like:
<Button command="Open" normalImage="icon1.png" hotImage="icon2.png" disableImage="icon3.png"/>
I am a fresher to WPF, I have tried many ways to do that but still stuck in this problem.
I would like to create a template or style that can apply to every button. The second and third snippet is what I want to achieve. But it not works. In the second snippet, the normalImage,hotImage and disableImage are dynamic paths that can be specified by buttons just as what I wrote in the third snippet.
Please help. Thanks.
I am trying to use attached-property, but I met another problem:
Style binding attached-property didn't show up anything

Answer 1

I solve it myself by using attached property. It may help others, so I post out my code.
Firstly, create the attached property:
class ImageAttached : DependencyObject
{
public static Image GetNormalImage(DependencyObject obj)
{
return (Image)obj.GetValue(NormalImageProperty);
}
public static void SetNormalImage(DependencyObject obj, Image value)
{
obj.SetValue(NormalImageProperty, value);
}
// Using a DependencyProperty as the backing store for NormalImage. This enables animation, styling, binding, etc...
public static readonly DependencyProperty NormalImageProperty =
DependencyProperty.RegisterAttached("NormalImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null));
public static Image GetHotImage(DependencyObject obj)
{
return (Image)obj.GetValue(HotImageProperty);
}
public static void SetHotImage(DependencyObject obj, Image value)
{
obj.SetValue(HotImageProperty, value);
}
// Using a DependencyProperty as the backing store for HotImage. This enables animation, styling, binding, etc...
public static readonly DependencyProperty HotImageProperty =
DependencyProperty.RegisterAttached("HotImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null));
public static Image GetDisableImage(DependencyObject obj)
{
return (Image)obj.GetValue(DisableImageProperty);
}
public static void SetDisableImage(DependencyObject obj, Image value)
{
obj.SetValue(DisableImageProperty, value);
}
// Using a DependencyProperty as the backing store for DisableImage. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DisableImageProperty =
DependencyProperty.RegisterAttached("DisableImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null));
}
Secondly, create a style target to a button:
<Style x:Key="btnStyle" TargetType="{x:Type Button}">
<Setter Property="Content" Value="{Binding Path=(local:ImageAttached.NormalImage), RelativeSource={RelativeSource Self}}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Content" Value="{Binding Path=(local:ImageAttached.HotImage), RelativeSource={RelativeSource Self}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Content" Value="{Binding Path=(local:ImageAttached.DisableImage), RelativeSource={RelativeSource Self}}"/>
</Trigger>
</Style.Triggers>
</Style>
Lastly, use it. e.g:
<Button x:Name="btn1" Click="Button_Click_1" Width="100" Height="48" Style="{DynamicResource btnStyle}"
local:ImageAttached.NormalImage="{StaticResource tstImage}"
local:ImageAttached.HotImage="{StaticResource tstImage2}"
local:ImageAttached.DisableImage="{StaticResource tstImage1}"/>