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?
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" />
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 DependencyProperty
s of the correct type, named ImagesSource
and Text
in your UserControl
and have set appropriate values for them.