Learn Dependency Properties In WPF?

Nagaraj M
Apr 15
13.9k
0
4

Article

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.

Dependency Properties