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.

RangeBase

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  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>
 12:         
 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>
 26: 

Here is the output of this program.

RangeBaseOutput

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: