Posted by: Zeeshan Amjad | December 8, 2009

Display text in progress bar


Sometimes we want to display the text inside the progress bar. One typical example is to display the current value of progress bar or some message. We can do this very easily if we are using grid panel. The only thing we have to display text block and progress bar in the same column and row of grid panel. Here is a sample XAML code to demonstrate this.

  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:     Title="Progress Bar" Height="300" Width="400">
  5:     <Window.Resources>
  6:         <ControlTemplate x:Key="ProgressTemplate">
  7:             <TextBlock Foreground="DarkBlue" FontSize="24" 
  8:                        HorizontalAlignment="Center" VerticalAlignment="Center"
  9:                        Text="{Binding ElementName=txtPercent, Path=Text}"/>
 10:         </ControlTemplate>
 11:     </Window.Resources>
 12:     
 13:     <Grid Background="AliceBlue">
 14:         <Grid.RowDefinitions>
 15:             <RowDefinition/>
 16:             <RowDefinition Height="2*"/>
 17:             <RowDefinition Height="2*"/>
 18:         </Grid.RowDefinitions>
 19:         
 20:         <Grid.ColumnDefinitions>
 21:             <ColumnDefinition/>
 22:             <ColumnDefinition/>
 23:         </Grid.ColumnDefinitions>
 24:         
 25:         <TextBlock Grid.Row="0" Grid.Column="0" Margin="5" VerticalAlignment="Center">
 26:             Enter percentage
 27:         </TextBlock>
 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:         <TextBlock Margin="5" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
 33:                    FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"
 34:                    Text="{Binding ElementName=txtPercent, Path=Text}"/>
 35:         <ProgressBar Margin="5" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
 36:                      Minimum="0" MaxHeight="100" Value="{Binding ElementName=txtPercent, Path=Text}"
 37:                      Template="{StaticResource ProgressTemplate}">
 38:         </ProgressBar>
 39:     </Grid>
 40: </Window>
 41: 

This is the output of this program.

ProgressBarOutput

If we want to display further information, such as display the % sign with the value of percentage, then we can use converter. Here is simple C# code to define converter.

  1: [ValueConversion(typeof(String), typeof(String))]
  2: public class ProgressBarConverter : IValueConverter
  3: {
  4:     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  5:     {
  6:         if (value != null)
  7:         {
  8:             String str = value as String;
  9:             String strValue = str;
 10:             strValue += "%";
 11:             return strValue;
 12:         }
 13:         else
 14:             return value;
 15:     }
 16: 
 17:     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
 18:     {
 19:         return value;
 20:     }
 21: }
 22: 

Here is XAML code to use this converter.

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

Here is complete C# code of this program.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: using System.Globalization;
 15: 
 16: namespace WpfProgressBar
 17: {
 18:     /// <summary>
 19:     /// Interaction logic for Window1.xaml
 20:     /// </summary>
 21:     public partial class Window1 : Window
 22:     {
 23:         public Window1()
 24:         {
 25:             InitializeComponent();
 26:         }
 27:     }
 28: 
 29:     [ValueConversion(typeof(String), typeof(String))]
 30:     public class ProgressBarConverter : IValueConverter
 31:     {
 32:         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
 33:         {
 34:             if (value != null)
 35:             {
 36:                 String str = value as String;
 37:                 String strValue = str;
 38:                 strValue += "%";
 39:                 return strValue;
 40:             }
 41:             else
 42:                 return value;
 43:         }
 44: 
 45:         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
 46:         {
 47:             return value;
 48:         }
 49:     }
 50: }
 51: 

This would be the output of this program.

ProgressBarOutput_2

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: