Posted by: Zeeshan Amjad | March 12, 2010

Using Progress Bar inside the Status Bar


We already saw the example of using Radion button inside the status bar here and here. Now we are going to use Progress bar inside the status bar. The first difference we notice here is that its height and width is not automatically set. We have to set the height and width of progress bar. Here instead of setting the height and width of progress bar, we set these properties to status bar. Then using the relative binding, we set the height and width of progress bar same as status bar. Here is a XAML code to do this.

  1: <StatusBar DockPanel.Dock="Bottom" Height="20" Width="280">
  2: 	<ProgressBar Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StatusBar}}, Path=Height}" 
  3: 		Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StatusBar}}, Path=Width}" 
  4: 		Minimum="0" Maximum="100" 
  5: 		Value="{Binding ElementName=txtValue, Path=Text}"/>
  6: </StatusBar>
  7: 

We already saw one example of validation error here. Now we are going to make the same program but display the progress bar inside the status bar. We uses the same validation class. Here is a simple implementation of our validation class.

  1: public class MyValidation : ValidationRule
  2: {
  3:     public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo)
  4:     {
  5:         String strValue = value as String;
  6: 
  7:         if (strValue.Length > 0)
  8:         {
  9:             int number = Int32.Parse((String)value);
 10: 
 11:             if (number < 0 || number > 100)
 12:             {
 13:                 return new ValidationResult(false, "Percentage should be in between 0 and 100");
 14:             }
 15:         }
 16: 
 17:         return new ValidationResult(true, null);
 18:     }
 19: }
 20: 

This is the same class we used earlier. We also display slider control along with progress bar, but in main window. Here is a complete XAML code of the program.

  1: <Window x:Class="WpfStatusBar.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:WpfStatusBar"
  5:     Title="Status Bar" Height="300" Width="300">
  6:     <DockPanel>
  7:         <StatusBar DockPanel.Dock="Bottom" Height="20" Width="280">
  8:             <ProgressBar Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StatusBar}}, Path=Height}" 
  9:                          Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StatusBar}}, Path=Width}" 
 10:                          Minimum="0" Maximum="100" 
 11:                          Value="{Binding ElementName=txtValue, Path=Text}"/>
 12:         </StatusBar>
 13:         <Grid>
 14:             <Grid.RowDefinitions>
 15:                 <RowDefinition/>
 16:                 <RowDefinition/>
 17:             </Grid.RowDefinitions>
 18:             <Grid.ColumnDefinitions>
 19:                 <ColumnDefinition/>
 20:                 <ColumnDefinition/>
 21:             </Grid.ColumnDefinitions>
 22:             <TextBlock Margin="5" Grid.Column="0" Grid.Row="0"
 23:                        VerticalAlignment="Center" HorizontalAlignment="Center">
 24:                 Enter Precentage
 25:             </TextBlock>
 26:             <TextBox Margin="5" Name="txtValue" Grid.Column="1" Grid.Row="0" VerticalAlignment="Center">
 27:                 <TextBox.Text>
 28:                     <Binding Path="Value" ElementName="slider">
 29:                         <Binding.ValidationRules>
 30:                             <local:MyValidation/>
 31:                         </Binding.ValidationRules>
 32:                     </Binding>
 33:                 </TextBox.Text>
 34:             </TextBox>
 35:             <Slider Name="slider" Margin="5" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" 
 36:                     VerticalAlignment="Center" Minimum="0" Maximum="100"
 37:                     Value="{Binding ElementName=txtValue, Path=Text}"/>
 38:         </Grid>
 39:     </DockPanel>
 40: </Window>
 41: 

And here is complete C# code of the 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: 
 15: namespace WpfStatusBar
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {        
 22: 
 23:         public Window1()
 24:         {
 25:             InitializeComponent();
 26:         }
 27:     }
 28: 
 29:     public class MyValidation : ValidationRule
 30:     {
 31:         public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo)
 32:         {
 33:             String strValue = value as String;
 34: 
 35:             if (strValue.Length > 0)
 36:             {
 37:                 int number = Int32.Parse((String)value);
 38: 
 39:                 if (number < 0 || number > 100)
 40:                 {
 41:                     return new ValidationResult(false, "Percentage should be in between 0 and 100");
 42:                 }
 43:             }
 44: 
 45:             return new ValidationResult(true, null);
 46:         }
 47:     }
 48: }
 49: 

Here is the output of the program when we enter some number in text box.

StatusBarProgressBarOutput

About these ads

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

Follow

Get every new post delivered to your Inbox.

Join 511 other followers

%d bloggers like this: