Add second image to content of button - wpf

Question

This is the peace of code for the button:
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
SlateBlue
</Border.Background>
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Height="30" Width="30" Stretch="Fill" Margin="0 0 0 0" />
<TextBlock Text="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" FontSize="12" VerticalAlignment="Center" Padding="10,0,10,0" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
As you can see, my button has an image and a text. However, I want to add another image after the text. How do I do this? I already use the Tag property once.
Here's how I use the button:
<myProject:ButtonWithTwoImages x:Name="btnHome" Tag="/Resources/Home.png" Content="Home" Command="{Binding Path=NavigateToCategoriesCommand}" Margin="20 0 0 0"/>
How do I add another image to the button?

Answer 1

I created a new user control called ButtonWithTwoImages, here is the code.
Xaml
<UserControl x:Class="WpfUserControl.ButtonWithTwoImages"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
SlateBlue
</Border.Background>
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="{Binding Path=Image1, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" Height="30" Width="30" Stretch="Fill" Margin="0 0 0 0" />
<TextBlock Text="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" FontSize="12" VerticalAlignment="Center" Padding="10,0,10,0" />
<Image Source="{Binding Path=Image2, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" Height="30" Width="30" Stretch="Fill" Margin="0 0 0 0" />
</StackPanel>
</Border>
</UserControl>
Xaml.cs
public partial class ButtonWithTwoImages : UserControl
{
public ButtonWithTwoImages()
{
InitializeComponent();
}
public ImageSource Image1
{
get { return (ImageSource)GetValue(Image1Property); }
set { SetValue(Image1Property, value); }
}
public static readonly DependencyProperty Image1Property = DependencyProperty.Register("Image1", typeof(ImageSource), typeof(ButtonWithTwoImages), new PropertyMetadata(null));
public ImageSource Image2
{
get { return (ImageSource)GetValue(Image2Property); }
set { SetValue(Image2Property, value); }
}
public static readonly DependencyProperty Image2Property = DependencyProperty.Register("Image2", typeof(ImageSource), typeof(ButtonWithTwoImages), new PropertyMetadata(null));
}
How To Use It
<Window x:Class="WpfUserControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mylib="clr-namespace:WpfUserControl">
<Grid>
<mylib:ButtonWithTwoImages Image1="Images\A.jpg" Image2="Images\B.jpg"></mylib:ButtonWithTwoImages>
</Grid>
</Window>