WPF Button Binding String Instead Of Imagesource With Dependency Property

Introduction

Here, we are going to see a way to reuse the dependency property created for binding in a WPF button. It is not always necessary to create multiple dependency properties with the different return types. The below steps show how to reuse the same dependency property for string as well as ImageSource type and this can be applied wherever similar scenario is applicable.

Step 1 - Creating a dependency property

Create dependency property with only string type which we are going to reuse for string and ImageSource type. The commented one in the code is for ImageSource type whose functionality is achieved with string type itself.

public class MyButton :Button
{
public static readonly DependencyProperty MyContentProperty =
DependencyProperty.Register("MyContent", typeof(string), typeof(MyButton));
public string MyContent
{
get
{
return (string)GetValue(MyContentProperty);
}
set
{
SetValue(MyContentProperty, value);
}
}
//below code is for ImageSource type which is achieved with above string type
// public static readonly DependencyProperty MyImageSourceProperty =
//DependencyProperty.Register("MyImageSource", typeof(ImageSource), typeof(MyButton));
// public ImageSource MyImageSource
// {
// get { return (ImageSource)GetValue(MyImageSourceProperty); }
// set { SetValue(MyImageSourceProperty, value); }
// }
}

Step 2 - Creating style for custom button

Create either ‘application-wide’ or ‘window-wide’ style to create a custom button. Styles can be in any form and are based on the application requirement. Below styles are created for demo which can be modified further.

<Style x:Key="DemoButton1" TargetType="{x:Type btn:MyButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type btn:MyButton}">
<Border Background="{TemplateBinding Background}">
<WrapPanel>
<TextBlock Text="{TemplateBinding Content}" Foreground="White" FontSize="15" ></TextBlock>
<Image Source="{Binding MyContent,RelativeSource={RelativeSource TemplatedParent}}" />
</WrapPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DemoButton2" TargetType="{x:Type btn:MyButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type btn:MyButton}">
<Border Background="{TemplateBinding Background}">
<StackPanel>
<TextBlock></TextBlock>
<TextBlock Text="{TemplateBinding MyContent}" Foreground="White" HorizontalAlignment="Center" FontSize="15"></TextBlock>
<TextBlock Text="{TemplateBinding MyContent}" Foreground="White" HorizontalAlignment="Center" FontSize="15"></TextBlock>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Note
Include the namespace in <ResourceDictionary> in case of application-wide style or in <Window> in case of window-wide style like below.

xmlns:btn="clr-namespace:MyWpfApplication.CustomButton"

In the above namespace,

MyWPFApplication – project name
CustomButton – Folder containing class for dependency property

Step 3 - Creating custom button

Include the namespace in the window as given in the above example and start creating the custom button.

<btn:MyButton Style="{StaticResource DemoButton1}" Content= "Home button with image" MyContent="pack://application:,,,/Images/home.png" Background= "#FFE87B3E" Grid.Column="1" Grid.Row="1"></btn:MyButton>
<btn:MyButton Style="{StaticResource DemoButton2}" MyContent="Click!!" Background="#FF27AF3E" Grid.Column="3" Grid.Row="1"></btn:MyButton>

Note
Mention the image path in form of pack URI only.

Output screenshot

Conclusion

Thus, by using the one property, we are able to make it fit for multiple purposes. With the help of the example discussed many scenarios can be created. Start using and enjoy!!