Button control with an icon in it - wpf

Question

I want to show an icon in some of my buttons. Since aligning an image inside a button isn't exactly trivial, I though a user control, derived control or something would come in handy. So I googled, tried, compiled and now I came up with the following code.
Unfortunately, my properties are not bound to anything and I cannot see the text nor an image. How can I make this work? What's the missing piece? I'm using VS2010 and .NET 4.0.
XAML:
<Button
x:Class="MyNS.IconButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
<Button.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding IconSource}" Name="Icon" Width="{Binding IconSize}" Height="{Binding IconSize}" Margin="0,0,4,0"/>
<ContentPresenter/>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsEnabled" Value="False">
<Setter Property="Image.Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Code file:
public partial class IconButton : Button
{
public static DependencyProperty IconSourceProperty = DependencyProperty.Register(
"IconSource",
typeof(ImageSource),
typeof(IconButton));
public static DependencyProperty IconSizeProperty = DependencyProperty.Register(
"IconSize",
typeof(int),
typeof(IconButton),
new PropertyMetadata(11));
public ImageSource IconSource
{
get { return (ImageSource) GetValue(IconSourceProperty); }
set { SetValue(IconSourceProperty, value); }
}
public int IconSize
{
get { return (int) GetValue(IconSizeProperty); }
set { SetValue(IconSizeProperty, value); }
}
public IconButton()
{
InitializeComponent();
}
}

Answer 1

It looks like your data binding might be the source of the issues. With those changes I was able to get an image to display in another page using your IconButton.
I made the following changes:
<!-- Added x:Name="_this" -->
<Button x:Class="ButtonTest.IconButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
x:Name="_this">
<Button.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal"
Background="Red">
<!-- Bindings Changed Here -->
<Image Source="{Binding ElementName=_this, Path=IconSource}"
Name="Icon"
Width="{Binding ElementName=_this, Path=IconSize}"
Height="{Binding ElementName=_this, Path=IconSize}" Margin="0,0,4,0"/>
<ContentPresenter />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsEnabled" Value="False">
<Setter Property="Image.Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>