Dependency Properties In WPF

Introduction

 
Dependency properties are properties which 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 Button sample by setting Content property using Style method.
 
Create WPF project and put the below code in the MainWindow.xaml file
  1. <Window x:Class="DependencyPropertiesSample.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  6.         xmlns:local="clr-namespace:DependencyPropertiesSample"  
  7.         mc:Ignorable="d" SizeToContent="WidthAndHeight" WindowStyle="None"  
  8.         AllowsTransparency="True" MouseDown="Window_MouseDown" BorderBrush="Silver" BorderThickness="2"  
  9.         Title="PersonView" Height="150" Width="400">  
  10.     <Grid>  
  11.         <Grid.RowDefinitions>  
  12.             <RowDefinition Height="30"/>  
  13.             <RowDefinition Height="60"/>  
  14.             <RowDefinition Height="50"/>  
  15.         </Grid.RowDefinitions>  
  16.         <Grid Grid.Row="0" Width="400" Background="Orange">  
  17.             <Label Content="Dependency Property with Button example" FontSize="14" Foreground="White" FontWeight="SemiBold"/>  
  18.             <Button Height="24" Width="24" Name="btnClose" HorizontalAlignment="Right" FontWeight="Bold" Cursor="Hand"  
  19.                     VerticalAlignment="Center" Content="X" Click="BtnClose_Click" Focusable="False" Background="{x:Null}" Foreground="White" />  
  20.             <x:Code>  
  21.                 private void BtnClose_Click(object sender, RoutedEventArgs e)  
  22.                 {  
  23.                     Close();  
  24.                 }  
  25.                  private void Window_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)  
  26.                 {  
  27.                     try  
  28.                     {  
  29.                         this.DragMove();  
  30.                     }  
  31.                     catch   
  32.                     {  
  33.                     }  
  34.                 }  
  35.             </x:Code>  
  36.         </Grid>  
  37.         <Grid Grid.Row="1">  
  38.             <Button Name="btnSample" Height="40" Width="200" Background="{x:Null}" Cursor="Hand">  
  39.                 <Button.Style>  
  40.                     <Style TargetType="{x:Type Button}">  
  41.                         <Setter Property="Content" Value="Ready to click"/>  
  42.                         <Style.Triggers>                              
  43.                             <Trigger Property="IsMouseOver" Value="True">  
  44.                                 <Setter Property="Content" Value="Click"/>  
  45.                             </Trigger>  
  46.                         </Style.Triggers>  
  47.                     </Style>  
  48.                 </Button.Style>  
  49.             </Button>  
  50.         </Grid>  
  51.     </Grid>  
  52. </Window>  
In the above code we can see that code we added under Grid.row=2 (same code add below)
  1. <Button Name="btnSample" Height="40" Width="200" Background="{x:Null}" Cursor="Hand">  
  2.                 <Button.Style>  
  3.                     <Style TargetType="{x:Type Button}">  
  4.                         <Setter Property="Content" Value="Ready to click"/>  
  5.                         <Style.Triggers>                              
  6.                             <Trigger Property="IsMouseOver" Value="True">  
  7.                                 <Setter Property="Content" Value="Click"/>  
  8.                             </Trigger>  
  9.                         </Style.Triggers>  
  10.                     </Style>  
  11.                 </Button.Style>  
  12.             </Button>  
When 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 mouse over,
 
Dependency Properties In WPF
 
Below is the execution window after mouse over,
 
Dependency Properties In WPF
 

Summary

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