C# WPF Button Style Template Not Showing Background Image

Question

I am putting together a very simple WPF Window to demonstrate how the style the end user has asked for looks. As there are a number of repeated button type objects I wanted to make them have a style in the window that can then be transferred to the real application once adjustments have been made.

The problem I face is that the user wishes to have images for their buttons, when I set the background image within the button itself then it shows perfectly and behaves as I want (change of image on mouseover etc). When I move that formatting into the Style everything till works but the background images don't show. I am sure I am missing something very simple but I cannot see it.

The code I have generated is below :-

<Window x:Class="SkinningDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SkinnigDemo"
        mc:Ignorable="d"
        Title="DemoWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="MainButtonStyle" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="/Images/Button1.png" />
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" 
                            BorderThickness="0">
                            <ContentPresenter HorizontalAlignment="Center" 
                                            VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="False">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="/Images/Button1.png"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" Value="#FF266C38"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="/Images/Button2.png"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" Value="#220A88"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid x:Name="Home">
        <Grid.Background>
            <SolidColorBrush Color="#FF220A88" Opacity="0.15"/>
        </Grid.Background>
        <Image HorizontalAlignment="Left" Height="68" Margin="10,10,0,0" VerticalAlignment="Top" Width="737" Source="images/Master Logo transparent.png"/>
        <TextBlock HorizontalAlignment="Left" Height="62" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="750" Margin="36,96,0,0" Foreground="#FF266C38" FontSize="14" FontWeight="Bold"><Run Language="en-gb" Text="Sample Welcome Text will be placed here once agreed..."/></TextBlock>
        <Rectangle HorizontalAlignment="Left" Height="111" Margin="36,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
            <Rectangle.Fill>
                <SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle HorizontalAlignment="Left" Height="111" Margin="427,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
            <Rectangle.Fill>
                <SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle HorizontalAlignment="Left" Height="111" Margin="36,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
            <Rectangle.Fill>
                <SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle HorizontalAlignment="Left" Height="111" Margin="427,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
            <Rectangle.Fill>
                <SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="54,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="First functional text will go here..."/></TextBlock>
        <Button x:Name="Button1" Style="{StaticResource MainButtonStyle}" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
        </Button>
        <TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Second Functional Text will go here..."/></TextBlock>
        <Button x:Name="Button2" Style="{StaticResource MainButtonStyle}" Content="View Function 2" HorizontalAlignment="Left" Height="50" Margin="472,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>

        <TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="56,294,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Third Functional Text will go here"/></TextBlock>
        <TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,295,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Fourth functional text will go here..."/></TextBlock>
        <Button x:Name="Button3" Style="{StaticResource MainButtonStyle}" Content="View Function 3" HorizontalAlignment="Left" Height="50" Margin="472,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>

        <Button x:Name="Button4" Style="{StaticResource MainButtonStyle}" Content="View Function 4" HorizontalAlignment="Left" Height="50" Margin="80,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>

    </Grid>
</Window>

As I say the background images do not display on the screen, but if I remove the style and set it all locally with exactly the same values it works perfectly :-

<Button x:Name="Button1"  Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
            <Button.Background>
                <ImageBrush ImageSource="/Images/Button1.png"/>
            </Button.Background>
        </Button>

Thanks in anticipation of the help.

Answer 1

Playing around with your nicely looking XAML I noticed that you need to say "bind" the Background brush to the root element of your control template which is a border, to get background images displayed.

If you just insert Background="{TemplateBinding Background}" under the line <Border Name="border" it'll basically work out fine., like:

  <Border Name="border"
           Background="{TemplateBinding Background}" 
           BorderThickness="0">