Create ControlTemplate with Attached Property - xaml

Question

I am essentially trying to create a Button with an image background and border that changes color based off if it is hovered, clicked or default state. I will several of these types of buttons, and I want to have a ControlTemplate defined that I can reuse and change the ImageSource. Here is what I have so far, but for some reason the TemplateBinding doesn't seem to work. The buttons have no background image set.
Template:
<ControlTemplate x:Name="SkillIconTemplate" TargetType="Button">
<Border CornerRadius="10" BorderThickness="2" Margin="5">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1"/>
<VisualTransition To="Pressed" GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Yellow" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Black"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.BorderBrush>
<SolidColorBrush x:Name="BorderBrush" Color="White"/>
</Border.BorderBrush>
<Border.Background>
<ImageBrush ImageSource="{TemplateBinding local:SkillIcon.IconImageSource}"/>
</Border.Background>
</Border>
</ControlTemplate>
Buttons:
<Button x:Name="skillIcon0" Width="75" Height="75" ClickMode="Press" local:SkillIcon.IconImageSource="ms-appx:/data/images/icons/skill_icon_0.png" Template="{StaticResource SkillIconTemplate}"/>
<Button x:Name="skillIcon1" Width="75" Height="75" ClickMode="Press" local:SkillIcon.IconImageSource="ms-appx:/data/images/icons/skill_icon_1.png" Template="{StaticResource SkillIconTemplate}"/>
…
Property Code:
public abstract class SkillIcon : DependencyObject
{
public static readonly DependencyProperty IconImageSourceProperty = DependencyProperty.RegisterAttached(
"IconImageSource",
typeof(ImageSource),
typeof(SkillIcon),
new PropertyMetadata(GetIconImage(0))
);
public static ImageSource GetIconImageSource(DependencyObject obj)
{
return (ImageSource)obj.GetValue(IconImageSourceProperty);
}
public static void SetIconImageSource(DependencyObject obj, ImageSource value)
{
obj.SetValue(IconImageSourceProperty, value);
}
/// <summary>
/// Gets the image source for the button
/// </summary>
public static ImageSource GetIconImage(int index)
{
Uri source = new Uri(string.Format("ms-appx:/data/images/icons/skill_icon_{0}.png", index), UriKind.RelativeOrAbsolute);
return new BitmapImage() { UriSource = source };
}
}
Usage in code:
SkillIcon.SetIconImageSource(skillIcon0, SkillIcon.GetIconImage(0));

Answer 1

I ended up binding the background of the Button to the background of the border:
<ControlTemplate x:Name="SkillIconTemplate" TargetType="Button">
<Border CornerRadius="10" BorderThickness="2" Margin="5" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.05"/>
<VisualTransition To="Pressed" GeneratedDuration="0:0:0.05"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Yellow" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Black"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.BorderBrush>
<SolidColorBrush x:Name="BorderBrush" Color="White"/>
</Border.BorderBrush>
</Border>
</ControlTemplate>