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 for button with text and image-->
<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 for button with repeated text i.e same text repeated twice in stack form inside button-->
    <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.

<!--custom button with DemoButton1 style-->
        <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>

<!--custom button with DemoButton2 style-->
        <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!!