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>