Cannot show image as content of WPF ToggleButton - wpf

Question

I'm working at this Point of time with VS 2015 and WPF.
Some weeks ago i had defined in the App.xaml of my project a templated style for the ToggleButton, so that users can see, if the button is checked or not.
Originally the Content of the togglebutton was a TextBlock with a text.
Now i want to replace that textblock by an Image.
Further i defined in the App.xaml some resources for the Images.
Here is the App.xaml:
<Application x:Class="WPFDesignerPrototyp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPFDesignerPrototyp"
StartupUri="MainWindow.xaml">
<Application.Resources>
<!-- Style for togglebuttons-->
<Style x:Key="toggleButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="outer"
BorderBrush="Black"
BorderThickness="1"
Margin="5,5,0,0"
Opacity=".9"
Background="Transparent">
<Border x:Name="inner"
Margin="5"
BorderThickness="0"
Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}">
<Grid x:Name="container">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--<TextBlock x:Name="display"
Grid.Row="1"
TextAlignment="Center"
Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,2,5,2"/>-->
<Image x:Name="displayimage"
Grid.Row="1"
HorizontalAlignment="Center"
Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,2,5,2"/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="outer" Property="Background" Value="LightBlue"/>
<Setter TargetName="outer" Property="BorderBrush" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Image x:Key="imageHorizontalAlignmentLeft" Source="C:/Utilities/VS 2015 ImageLibrary/2015_VSIcon/AlignLeft/AlignLeft_16x.png"/>
<Image x:Key="imageHorizontalAlignmentCenter" Source="C:/Utilities/VS 2015 ImageLibrary/2015_VSIcon/AlignStretchHorizontal/AlignStretchHorizontal_16x.png"/>
<Image x:Key="imageHorizontalAlignmentRight" Source="C:/Utilities/VS 2015 ImageLibrary/2015_VSIcon/AlignRight/AlignRight_16x.png"/>
</Application.Resources>
</Application>
Then - in my WPF window - i implemented the new Content into one of my togglebuttons.
<ToggleButton x:Name="setAlignLeft" Grid.Row="1" Grid.Column="1" Content="{StaticResource imageHorizontalAlignmentLeft}" Style="{StaticResource toggleButtonStyle}" Click="setAlignLeft_Click"/>
But unfortunately nothing happens.
The Content of the button is blank.
So i tried it with another togglebutton, without the style toggleButtonStyle and there it worked.
I think there must be a mistake in my template but i don't know where.
Can anybody help?
Thanks in advance,
Patrick

Answer 1

You will need to bind with Content.Source of the parent as Content is already Image.
<Image x:Name="displayimage"
Grid.Row="1"
HorizontalAlignment="Center"
Source="{Binding Content.Source, RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,2,5,2"/>