Posted by: Zeeshan Amjad | January 12, 2010

Control Template of Progress Bar Revisited

We studied how make a control template of progress bar. In that sample we display ellipse and the current value of progress bar inside the ellipse.

Now let’s enhance its functionality and change the width of the ellipse depends on its current value. In this case we will get the current value of progress bare using the relative source markup extension. Here is a piece of code to define control template of progress bar.

  1: <ControlTemplate x:Key="ProgressTemplate">
  2: 	<Grid>
  3: 		<Ellipse Fill="{TemplateBinding Background}" 
  4: 			 Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value}"
  5: 			 Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"/>
  6: 		<TextBlock Foreground="{TemplateBinding Foreground}" 
  7: 			   FontSize="32" FontWeight="Bold"
  8: 			   HorizontalAlignment="Center" VerticalAlignment="Center"
  9: 			   Text="{Binding ElementName=txtPercent, Path=Text}"/>
 10: 	</Grid>
 11: </ControlTemplate>

Rest of the code is very similar to previous example. Here is complete code of the program.

  1: <Window x:Class="WpfProgressBar.Window1"
  2:     xmlns=""
  3:     xmlns:x=""
  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=Value}"
 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>
 20:     <Grid Background="AliceBlue">
 21:         <Grid.RowDefinitions>
 22:             <RowDefinition/>
 23:             <RowDefinition Height="2*"/>
 24:             <RowDefinition Height="2*"/>
 25:         </Grid.RowDefinitions>
 27:         <Grid.ColumnDefinitions>
 28:             <ColumnDefinition/>
 29:             <ColumnDefinition/>
 30:         </Grid.ColumnDefinitions>
 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="500" Value="{Binding ElementName=txtPercent, Path=Text}"/>
 38:         <ProgressBar Margin="5" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
 39:                      Minimum="0" Maximum="500" Foreground="Yellow" Background="Blue"
 40:                      Value="{Binding ElementName=txtPercent, Path=Text}"
 41:                      Template="{StaticResource ProgressTemplate}">
 42:         </ProgressBar>
 43:     </Grid>
 44: </Window>

Note that we change the range of the progress bar from 100 to 500 to get better effect of ellipse width. Here is the output of this program with different value of progress bar.




Leave a Reply

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

You are commenting using your 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


%d bloggers like this: