Setting text property to a button doesn't work - wpf

Question

This is my UserControl file:
<UserControl x:Class="myProject.ButtonWithImage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:myProject="clr-namespace:myProject;assembly=myProject.BusinessLogic"
mc:Ignorable="d"
Name="ImagedControl"
d:DesignHeight="300" d:DesignWidth="300">
<Button Height="35" Width="90" FocusVisualStyle="{x:Null}" Foreground="White"
Click="OnClick" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0 0 1 1">
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="{Binding ElementName=ImagedButton, Path=ImageSource}" Stretch="None" Margin="0 0 5 0" />
<TextBlock Text="{Binding ElementName=ImagedButton, Path=Text}" FontSize="12" VerticalAlignment="Center" />
</StackPanel>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
SlateBlue
</Border.Background>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
And in a page I set up a button like this:
<myProject:ButtonWithImage ImageSource="/Resources/test.png" Text="Back" Name="btnBack1" Command="NavigationCommands.GoToPage" CommandParameter="ViewModel/Categories.xaml" />
However the text and the imagesource aren't on the button! They don't appear. What am I doing wrong?

Answer 1

Created Button Usercontrol
<Button x:Class="WpfApplication5.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
FocusVisualStyle="{x:Null}" Content="ok" Foreground="White" Height="30" Width="90" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0 0 1 1">
<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" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
c# code
public partial class UserControl1 : Button
{
public UserControl1()
{
InitializeComponent();
}
}
xaml window
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:myProject="clr-namespace:WpfApplication5"
Title="MainWindow" Height="350" Width="525">
<myProject:UserControl1 Content="Button Text" Tag="btn2.png" />

Answer 2

You have named your UserControl ImageControl, but then you have tried to access it in your XAML using the name ImageButton. You'll have more luck if you stick with the one name. Try this instead:
<UserControl x:Class="myProject.ButtonWithImage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:myProject="clr-namespace:myProject;assembly=myProject.BusinessLogic"
mc:Ignorable="d"
Name="ImagedControl"
d:DesignHeight="300" d:DesignWidth="300">
<Button Height="35" Width="90" FocusVisualStyle="{x:Null}" Foreground="White"
Click="OnClick" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0 0 1 1">
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="{Binding ElementName=ImagedControl, Path=ImageSource}" Stretch="None" Margin="0 0 5 0" />
<TextBlock Text="{Binding ElementName=ImagedControl, Path=Text}" FontSize="12" VerticalAlignment="Center" />
</StackPanel>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
SlateBlue
</Border.Background>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
This also assumes that you have correctly declared two DependencyPropertys of the correct type, named ImagesSource and Text in your UserControl and have set appropriate values for them.