Learn Dependency Properties In WPF?

Introduction

Dependency properties are properties that are set by methods like Style, Binding, etc. Dependency properties extend the CLR properties.

Why use Dependency properties?

• To set the styles
• To set the dynamic and static resources
• To set the bindings
• To set the animations

We will see an example by using a Button sample by setting the Content property using the Style method.

Create a WPF project and put the below code in the MainWindow.xaml file.

<Window x:Class="DependencyPropertiesSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DependencyPropertiesSample"
        mc:Ignorable="d" SizeToContent="WidthAndHeight" WindowStyle="None"
        AllowsTransparency="True" MouseDown="Window_MouseDown" BorderBrush="Silver" BorderThickness="2"
        Title="PersonView" Height="150" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Width="400" Background="Orange">
            <Label Content="Dependency Property with Button example" FontSize="14" Foreground="White" FontWeight="SemiBold"/>
            <Button Height="24" Width="24" Name="btnClose" HorizontalAlignment="Right" FontWeight="Bold" Cursor="Hand"
                    VerticalAlignment="Center" Content="X" Click="BtnClose_Click" Focusable="False" Background="{x:Null}" Foreground="White"/>
            <x:Code>
                private void BtnClose_Click(object sender, RoutedEventArgs e)
                {
                    Close();
                }
                private void Window_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
                {
                    try
                    {
                        this.DragMove();
                    }
                    catch
                    {
                    }
                }
            </x:Code>
        </Grid>
        <Grid Grid.Row="1">
            <Button Name="btnSample" Height="40" Width="200" Background="{x:Null}" Cursor="Hand">
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Content" Value="Ready to click"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Content" Value="Click"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
            </Button>
        </Grid>
    </Grid>
</Window>

In the above code, we can see the code we added under Grid.row=2 (same code add below)

<Button Name="btnSample" Height="40" Width="200" Background="{x:Null}" Cursor="Hand">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Content" Value="Ready to click"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Content" Value="Click"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

When the IsMouseOver property is triggered; i.e., when users move the mouse over the button we are changing/setting the Button content as “Click” from content “Ready to click” 

Below is the execution window before mousing over.

Below is the execution window after the mouseover.

Summary

In this blog, we understood what dependency properties are and how to use dependency property.