Custom Control in WPF - wpf

Question

I have just started to learn WPF.
I have a button with image. like Image+Text
<Button Height="67" Name="Button1" Width="228" HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" >
<Image Source="Images/add.png" Stretch="Uniform"></Image>
<TextBlock Text=" Create Company" VerticalAlignment="Center" FontSize="20"></TextBlock>
</StackPanel>
</Button>
Now I want to add many more buttons in the above format.
So I have to write the same code again and again.
So I decided to have a customButton to do my job easily.
I tried to create the custom control.
I added a property named Image there.
Now how should I give value to that property?
Am I going on the wrong way?

Answer 1

Here you have tutorial how to create a custom control.
[1.] Add new item "Custom Control (WPF)" with name "ButtonImg".
After this step, VS create for you two files: "ButtonImg.cs" and "/Themes/Generic.xaml".
[2.] Add few dependency properties to "ButtonImg.cs" file:
I created properties to: image source, text, image width and height.
public class ButtonImg : Control
{
static ButtonImg()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ButtonImg), new FrameworkPropertyMetadata(typeof(ButtonImg)));
}
public ImageSource ImageSource
{
get { return (ImageSource)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}
public static readonly DependencyProperty ImageSourceProperty =
DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(ButtonImg), new PropertyMetadata(null));
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(ButtonImg), new PropertyMetadata(string.Empty));
public double ImageWidth
{
get { return (double)GetValue(ImageWidthProperty); }
set { SetValue(ImageWidthProperty, value); }
}
public static readonly DependencyProperty ImageWidthProperty =
DependencyProperty.Register("ImageWidth", typeof(double), typeof(ButtonImg), new PropertyMetadata((double)30));
public double ImageHeight
{
get { return (double)GetValue(ImageHeightProperty); }
set { SetValue(ImageHeightProperty, value); }
}
public static readonly DependencyProperty ImageHeightProperty =
DependencyProperty.Register("ImageHeight", typeof(double), typeof(ButtonImg), new PropertyMetadata((double)30));
}
[3.] In this step you must create Template for your new custom control. So you must edit following file "/Themes/Generic.xaml":
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfButtonImg">
<Style TargetType="{x:Type local:ButtonImg}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ButtonImg}">
<Button>
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="{TemplateBinding ImageSource}"
Height="{TemplateBinding ImageHeight}" Width="{TemplateBinding ImageWidth}"
Stretch="Uniform" />
<TextBlock Text="{TemplateBinding Text}" Margin="10,0,0,0" VerticalAlignment="Center" FontSize="20" />
</StackPanel>
</Button.Content>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
[4.] Example of using this new custom control is following:
First you must add appropriate namespace:
xmlns:MyNamespace="clr-namespace:WpfButtonImg"
Now you can use it like this:
<MyNamespace:ButtonImg ImageSource="/Images/plug.png" Text="Click me!" />