Posted by: Zeeshan Amjad | January 9, 2010

Using TemplateBinding Extension


This is one of the predefined markup extension class in WPF. This class is child class of abstract markup extension class just like lots of other pre define markup extension classes. Here is a class diagram of predefined markup extension classes.

MarkupExtension

Lets explore this class by one example. In first stage we are going to make one small program that define the control template for progress bar. This is not a very fancy example, but display the current value of progress bar in text block. Here is a XAML code of this program.

  1: <Window x:Class="WpfProgressBar.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     xmlns:local="clr-namespace:WpfProgressBar"
  5:     Title="Progress Bar" Height="300" Width="400">
  6:     <Window.Resources>
  7:         <ControlTemplate x:Key="ProgressTemplate">
  8:             <TextBlock Foreground="DarkBlue" FontSize="32" FontWeight="Bold"
  9:                        HorizontalAlignment="Center" VerticalAlignment="Center"
 10:                        Text="{Binding ElementName=txtPercent, Path=Text}"/>
 11:         </ControlTemplate>
 12:     </Window.Resources>
 13: 
 14:     <Grid Background="AliceBlue">
 15:         <Grid.RowDefinitions>
 16:             <RowDefinition/>
 17:             <RowDefinition Height="2*"/>
 18:             <RowDefinition Height="2*"/>
 19:         </Grid.RowDefinitions>
 20: 
 21:         <Grid.ColumnDefinitions>
 22:             <ColumnDefinition/>
 23:             <ColumnDefinition/>
 24:         </Grid.ColumnDefinitions>
 25: 
 26:         <TextBlock Grid.Row="0" Grid.Column="0" Margin="5" 
 27:                    VerticalAlignment="Center" Text="Enter Percentage"/>
 28:         <TextBox Grid.Row="0" Grid.Column="1" Margin="5" Name="txtPercent" VerticalAlignment="Center">
 29:         </TextBox>
 30:         <ProgressBar Margin="5" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 
 31:                      Minimum="0" Maximum="100" Value="{Binding ElementName=txtPercent, Path=Text}"/>
 32:         <ProgressBar Margin="5" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
 33:                      Minimum="0" MaxHeight="100" Foreground="Green"
 34:                      Value="{Binding ElementName=txtPercent, Path=Text}"
 35:                      Template="{StaticResource ProgressTemplate}">
 36:         </ProgressBar>
 37:     </Grid>
 38: </Window>
 39: 
 40: 

This is the output of the program, if we enter some value in the text block.

TemplateBinding_01

Important thing is that it will display the current value of progress bar always in Dark Blue color. Because this is a color we specify in control template. Even if we specify the foreground color of progress bar it will still show in Dark Blue color. Here is a code to specify the foreground color of progress bar Green.

  1: <ProgressBar Margin="5" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
  2: 	 Minimum="0" MaxHeight="100" Foreground="Green"
  3: 	 Value="{Binding ElementName=txtPercent, Path=Text}"
  4: 	 Template="{StaticResource ProgressTemplate}">
  5: 

But the text of text block is still in Dark Blue color. If we want to use the foreground color specify in the control then we are going to use the template binding. Now instead of hard code the foreground color to dark blue in control template we are using the template binding markup extension. Here is a piece of code to specify this. Here is a piece of XAML code to use template binding for text foreground color.

  1: <ControlTemplate x:Key="ProgressTemplate">
  2: 	<TextBlock Foreground="DarkBlue" FontSize="32" FontWeight="Bold"
  3: 			   HorizontalAlignment="Center" VerticalAlignment="Center"
  4: 			   Text="{Binding ElementName=txtPercent, Path=Text}"/>
  5: </ControlTemplate>
  6: 

Here we specify the foreground property of the control should be used as a foreground color of text. We can of course set any property not specific to foreground color. Here we are using the Background color property as a foreground color of the text block.

  1: <ControlTemplate x:Key="ProgressTemplate">
  2: 	<TextBlock Foreground="{TemplateBinding Background}" FontSize="32" FontWeight="Bold"
  3: 			   HorizontalAlignment="Center" VerticalAlignment="Center"
  4: 			   Text="{Binding ElementName=txtPercent, Path=Text}"/>
  5: </ControlTemplate>
  6: 

Here we define our progress bar control with different foreground and background color.

  1: <ProgressBar Margin="5" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
  2: 	 Minimum="0" MaxHeight="100" Foreground="Green" Background="Red"
  3: 	 Value="{Binding ElementName=txtPercent, Path=Text}"
  4: 	 Template="{StaticResource ProgressTemplate}">
  5: 

We can also set other properties using the template binding.  The color of text block is Read instead of Green. Here is a complete code of our program.

  1: <Window x:Class="WpfProgressBar.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     xmlns:local="clr-namespace:WpfProgressBar"
  5:     Title="Progress Bar" Height="300" Width="400">
  6:     <Window.Resources>
  7:         <ControlTemplate x:Key="ProgressTemplate">
  8:             <TextBlock Foreground="{TemplateBinding Foreground}" FontSize="32" FontWeight="Bold"
  9:                        HorizontalAlignment="Center" VerticalAlignment="Center"
 10:                        Text="{Binding ElementName=txtPercent, Path=Text}"/>
 11:         </ControlTemplate>
 12:     </Window.Resources>
 13: 
 14:     <Grid Background="AliceBlue">
 15:         <Grid.RowDefinitions>
 16:             <RowDefinition/>
 17:             <RowDefinition Height="2*"/>
 18:             <RowDefinition Height="2*"/>
 19:         </Grid.RowDefinitions>
 20: 
 21:         <Grid.ColumnDefinitions>
 22:             <ColumnDefinition/>
 23:             <ColumnDefinition/>
 24:         </Grid.ColumnDefinitions>
 25: 
 26:         <TextBlock Grid.Row="0" Grid.Column="0" Margin="5" 
 27:                    VerticalAlignment="Center" Text="Enter Percentage"/>
 28:         <TextBox Grid.Row="0" Grid.Column="1" Margin="5" Name="txtPercent" VerticalAlignment="Center">
 29:         </TextBox>
 30:         <ProgressBar Margin="5" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 
 31:                      Minimum="0" Maximum="100" Value="{Binding ElementName=txtPercent, Path=Text}"/>
 32:         <ProgressBar Margin="5" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
 33:                      Minimum="0" MaxHeight="100" Foreground="Green" Background="Red"
 34:                      Value="{Binding ElementName=txtPercent, Path=Text}"
 35:                      Template="{StaticResource ProgressTemplate}">
 36:         </ProgressBar>
 37:     </Grid>
 38: </Window>
 39: 
 40: 

Here is the output of the program now.

TemplateBinding_02

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: