Slider Control in Windows Presentation Foundation

Musings of a Ph.D. student in Computer Science

Slider Control in Windows Presentation Foundation

Published on March 15, 2007

One of WPF controls that could get my interest was Slider. This control comes to simplify the process of coding for some UI design cases where you need to let your user choose a value and change it and you update your interface based on user's choices. A very common example is a slider control that lets user to zoom in or zoom out to view a photo.

Slider is a built-in control in WPF and is easy to use. You can have horizontal and vertical sliders with any custom interval and ticks that you like. Let me give a background about this control and its functionality then describe its properties and give an example.

Slider can be used as a selector for several values. These values (which are double) can have a minimum and maximum. You can put different tick values for these values to split this interval. On the other hand you can set some values for intervals and delays between movements and clicks on ticks.

Here is a brief description of common properties for slider control in WPF:

AutoToolTipPlacement: Specifies if a ToolTip must be shown and where it will be displayed.
Delay: A value in milliseconds that specifies how long RepeatButton should wait before an increase or decrease.
Interval: a value in milliseconds that specifies the time for waiting between repeats.
LargeChange: The amount that should be added or subtracted to or from Value attribute when user clicks on scrollbar.
Maximum: Maximum value for slider.
Minimum: Minimum value for slider.
Orientation: Gets to values, Horizontal or Vertical and specifies the orientation of slider.
SmallChange: The amount that should be added or subtracted to or from Value attribute when user clicks on thumb.
TickPlacement: Determines the place that ticks should be placed.
Ticks: A required attribute and a set of double values for ticks.
Value: Default selected value for tick.

Let's take a look at a sample. Here I want to write a sample application to let user view an image and zoom in or zoom out. User moves the thumb right or left to zoom in or out and application applies changes automatically. I used one of Windows Vista sample images for this example and fixed left corner point for simplicity. So user can zoom in or out on this point. In this example I use ImageBrush and Viewbox to implement my zoom logic. To have a background you can read my post about Viewbox and Viewport in Windows Presentation Foundation.

<Window x:Class="SliderSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Slider Sample" Height="300" Width="300"
    >
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="200" />
      <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Row="0" Grid.Column="0" Width="250">
      <Rectangle.Fill>
        <ImageBrush x:Name="imageBrush" ImageSource="Image.jpg" />
      </Rectangle.Fill>
    </Rectangle>
 
    <Slider Ticks="1, 2, 3, 4, 5, 6, 7, 8, 9, 10"
            Value="1"
            Delay="100"
            Interval="5"
            TickPlacement="BottomRight"
            Minimum="1"
            Maximum="10"
            Width="100"
            AutoToolTipPlacement="BottomRight"
            ValueChanged="slider_ValueChanged"
            Grid.Row="1"
            Grid.Column="0">
    </Slider>
  </Grid>
</Window>

Here I declare a Grid to keep my image and slider control. A Rectangle keeps my ImageBrush to render the image. ImageBrush has a name because I want to refer to it in code behind. Slider itself comes with Ticks values from 1 to 10 and default value is set to 1. There are two values for Delay and Interval to give a better effect to user interface. I put my ticks on bottom right using TickPlacement attribute. Minimum and Maximum attributes specify minimum and maximum of possible values for slider. I also put a ToolTip text at bottom right of cursor to show tick value. When user changes the value, ValueChanged event fires and slider_ValueChanged event handler does the main logic to zoom in or zoom out on image.

void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    double value = e.NewValue;
 
    ImageBrush imageBrush = this.FindName("imageBrush") as ImageBrush;
    imageBrush.Viewbox = new Rect(0.3, 0.3, 1 / value, 1 / value);
}

Now I can test my application and see the result.

Enjoy WPF!

7 Comments

Fahrenheit Marketing is your resource for Search Engine Optimization in Austin.

DotNetKicks.com
Mar 15, 2007 11:31 AM
#

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Senthil Balaji R
Jul 07, 2007 4:07 AM
#

Very nice, Easy to understand with the help of screenshots

ben
Apr 11, 2008 9:28 AM
#

Nice guide in slider XAML, it helps me to write XAML for the free WPF Gauge library i downloaded from <a href="http://www.nextwavesoft.com">http://www.nextwavesoft.com</a>