How to create a common IconButton in WPF - wpf

Question

Here is my case,
To create a common icon button, which can be used with different icons whereever.
Here are my steps:
1). create a custom IconButton derived from Button, it has a DefaultImageSource dependency property. Here it is:
public class IconButton : Button
{
public static readonly DependencyProperty DefaultImageSourceProperty =
DependencyProperty.Register("DefaultImageSource", typeof(ImageSource), typeof(IconButton), new FrameworkPropertyMetadata(null));//, new FrameworkPropertyMetadata(OnImageSourceChanged));
public ImageSource DefaultImageSource
{
get { return (ImageSource)GetValue(DefaultImageSourceProperty); }
set { SetValue(DefaultImageSourceProperty, value); }
}
}
2). Create a style for IconButton in project resource where supppose to use this IconButton with this style,
<Style x:Key="IconButtonTemplate" TargetType="{x:Type WpfApplication3:IconButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type WpfApplication3:IconButton}">
<Grid>
<Image Source="{Binding RelativeSource={RelativeSource Self}, Path=DefaultImageSource}" Stretch="Uniform" Width="Auto" Height="Auto" x:Name="imageArt"/>
<Ellipse x:Name="focusEllipse" Fill="Transparent"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="focusEllipse" Property="Fill" Value="#AAFFFFFF"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="focusEllipse" Property="Fill" Value="#AA808080"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="focusEllipse" Property="Fill" Value="#80808080"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
3). Create multi IconButton in my WPF window, and binding them to different icon, but no luck; icons don't show up when openning this window,
<Grid>
<DockPanel>
<WpfApplication3:IconButton Width="30" Height="30" DefaultImageSource="{DynamicResource RefreshIcon}" Style="{DynamicResource IconButtonTemplate}"></WpfApplication3:IconButton>
<WpfApplication3:IconButton Width="30" Height="30" DefaultImageSource="{DynamicResource RunIcon}" Style="{DynamicResource IconButtonTemplate}"></WpfApplication3:IconButton>
</DockPanel>
</Grid>
It might be issue of the wrong binding for the image resource, but can't figure out with several tries. Any suggestion? Thanks.

Answer 1

I can see the issue in Binding . Using
<Image Source="{Binding RelativeSource={RelativeSource Self}, Path=DefaultImageSource}" Stretch="Uniform" Width="Auto" Height="Auto" x:Name="imageArt"/>
using Self Mode you are trying to Bind Source to DefaultImageSource property of Image Control. And Image doesnot have any such property so bang.
Try this
<Image Source="{TemplateBinding DefaultImageSource}" Stretch="Uniform" Width="Auto" Height="Auto" x:Name="imageArt"/>
This will try to bind the Source of Image to DefaultImageSource property of Button.
I hope this will help.