Posted by: Zeeshan Amjad | December 2, 2009

RangeBase controls of WPF

WPF defines three controls that are based on range of values. These controls are Progress bar, slider and scroll bar. All of these are inherited by RangeBase based class. Here is a class diagram of Rangebase class.


Now we are going to use these controls together and do data binding. In addition we also display the current value of the range in text block. Here is a complete XAML code of this.

  1: <Window x:Class="Slider.Window1"
  2:     xmlns=""
  3:     xmlns:x=""
  4:     Title="Range Base Controls" Height="300" Width="400">
  5:     <Grid>
  6:         <Grid.RowDefinitions>
  7:             <RowDefinition/>
  8:             <RowDefinition/>
  9:             <RowDefinition/>
 10:             <RowDefinition/>
 11:         </Grid.RowDefinitions>
 13:         <TextBlock FontSize="20" Foreground="Blue" FontWeight="Bold"
 14:                    HorizontalAlignment="Center" VerticalAlignment="Center" 
 15:                    Grid.Row="0" Name="text" Margin="5" 
 16:                    Text="{Binding ElementName=slider, Path=Value}"></TextBlock>
 17:         <ProgressBar Margin="5" Grid.Row="1" Minimum="0" Maximum="100"
 18:                      Value="{Binding ElementName=slider, Path=Value}"></ProgressBar>
 19:         <ScrollBar Orientation="Horizontal" Grid.Row="2" Margin="5"
 20:                    Minimum="0" Maximum="100" 
 21:                    Value="{Binding ElementName=slider, Path=Value}"></ScrollBar>
 22:         <Slider VerticalAlignment="Center" Grid.Row="3" Minimum="0" Maximum="100" 
 23:                TickPlacement="Both" TickFrequency="5" Name="slider" Margin="5"></Slider>
 24:     </Grid>
 25: </Window>

Here is the output of this program.



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 )

Google+ photo

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


Connecting to %s


%d bloggers like this: