Posted by: Zeeshan Amjad | January 10, 2010

Using Relative Source


We already specify the control template of progress bar. Now lets extend it little bit and display the the text in ellipse. Here is our first attempt.

  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:             <Grid>
  9:                 <Ellipse Fill="{TemplateBinding Background}" 
 10:                          Width="150" Height="75"/>
 11:                 <TextBlock Foreground="{TemplateBinding Foreground}" 
 12:                        FontSize="32" FontWeight="Bold"
 13:                        HorizontalAlignment="Center" VerticalAlignment="Center"
 14:                        Text="{Binding ElementName=txtPercent, Path=Text}"/>
 15:             </Grid>
 16:         </ControlTemplate>
 17:     </Window.Resources>
 18: 
 19:     <Grid Background="AliceBlue">
 20:         <Grid.RowDefinitions>
 21:             <RowDefinition/>
 22:             <RowDefinition Height="2*"/>
 23:             <RowDefinition Height="2*"/>
 24:         </Grid.RowDefinitions>
 25: 
 26:         <Grid.ColumnDefinitions>
 27:             <ColumnDefinition/>
 28:             <ColumnDefinition/>
 29:         </Grid.ColumnDefinitions>
 30: 
 31:         <TextBlock Grid.Row="0" Grid.Column="0" Margin="5" 
 32:                    VerticalAlignment="Center" Text="Enter Percentage"/>
 33:         <TextBox Grid.Row="0" Grid.Column="1" Margin="5" Name="txtPercent" VerticalAlignment="Center">
 34:         </TextBox>
 35:         <ProgressBar Margin="5" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 
 36:                      Minimum="0" Maximum="100" Value="{Binding ElementName=txtPercent, Path=Text}"/>
 37:         <ProgressBar Margin="5" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
 38:                      Minimum="0" MaxHeight="100" Foreground="Yellow" Background="Blue"
 39:                      Value="{Binding ElementName=txtPercent, Path=Text}"
 40:                      Template="{StaticResource ProgressTemplate}">
 41:         </ProgressBar>
 42:     </Grid>
 43: </Window>
 44: 
 45: 

This would be the output of the program.

RelativeSource_01

But the width and height of ellipse is fixed here. Let’s take a look at template binding approach and see its output. Now if we want to use the width and height of height and width of ellipse equal to its parent, i.e. equal to the row of grid then we will use the relative source markup extension. Relative source is one of already predefined markup extension in WPF. Here is a class diagram of pre defined markup extension classes in WPF.

MarkupExtension

Here is a piece of XAML code to define height and width of ellipse equal to its parent.

  1: <Ellipse Fill="{TemplateBinding Background}" 
  2: 	 Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}"
  3: 	 Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"/>
  4: 

Here is a complete XAML code of the 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:             <Grid>
  9:                 <Ellipse Fill="{TemplateBinding Background}" 
 10:                      Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}"
 11:                      Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"/>
 12:                 <TextBlock Foreground="{TemplateBinding Foreground}" 
 13:                        FontSize="32" FontWeight="Bold"
 14:                        HorizontalAlignment="Center" VerticalAlignment="Center"
 15:                        Text="{Binding ElementName=txtPercent, Path=Text}"/>
 16:             </Grid>
 17:         </ControlTemplate>
 18:     </Window.Resources>
 19: 
 20:     <Grid Background="AliceBlue">
 21:         <Grid.RowDefinitions>
 22:             <RowDefinition/>
 23:             <RowDefinition Height="2*"/>
 24:             <RowDefinition Height="2*"/>
 25:         </Grid.RowDefinitions>
 26: 
 27:         <Grid.ColumnDefinitions>
 28:             <ColumnDefinition/>
 29:             <ColumnDefinition/>
 30:         </Grid.ColumnDefinitions>
 31: 
 32:         <TextBlock Grid.Row="0" Grid.Column="0" Margin="5" 
 33:                    VerticalAlignment="Center" Text="Enter Percentage"/>
 34:         <TextBox Grid.Row="0" Grid.Column="1" Margin="5" Name="txtPercent" VerticalAlignment="Center">
 35:         </TextBox>
 36:         <ProgressBar Margin="5" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 
 37:                      Minimum="0" Maximum="100" Value="{Binding ElementName=txtPercent, Path=Text}"/>
 38:         <ProgressBar Margin="5" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
 39:                      Minimum="0" Maximum="100" Foreground="Yellow" Background="Blue"
 40:                      Value="{Binding ElementName=txtPercent, Path=Text}"
 41:                      Template="{StaticResource ProgressTemplate}">
 42:         </ProgressBar>
 43:     </Grid>
 44: </Window>
 45: 
 46: 

Here is the output of this program.

RelativeSource_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: