Zeeshan Amjad's Blog

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.
 
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.


		
	
			

			
			
Share this:
Share
Email
Twitter
Facebook
Reddit
Tumblr
Print
Pinterest
LinkedIn
Like Loading...


	
Related