BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Selection Controls - Slider

The seventy-third part of the Windows Presentation Foundation Fundamentals tutorial looks at the last of the WPF selection controls. This article describes the Slider, which lets users select a value from within a fixed range.

Slider

The Slider is the final WPF selection control that we'll consider in this tutorial. It permits a user to select a value from within a specified range. The selection is graphical; the control shows a sliding thumb on a fixed track. The user can move the thumb to set the value by clicking the track, sliding the thumb or focussing the control and using the arrow keys.

To demonstrate the use of Sliders we need a sample solution. Create a new WPF application project in Visual Studio, naming the solution, "SliderDemo". When the new solution is ready, replace the XAML in the main window with the code below:

<Window x:Class="SliderDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Slider Demo"
        Height="150"
        Width="200">
    <Grid Background="WhiteSmoke">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>

        <TextBlock>Red</TextBlock>
        <TextBlock Grid.Row="1">Green</TextBlock>
        <TextBlock Grid.Row="2">Blue</TextBlock>

        <Slider Grid.Column="1"/>
        <Slider Grid.Row="1" Grid.Column="1"/>
        <Slider Grid.Row="2" Grid.Column="1"/>

        <Canvas Grid.Row="3" Grid.Column="1" Background="Black" Name="ColourCanvas"/>
    </Grid>
</Window>

The XAML above describes a window with three sliders and a coloured Canvas. Shortly we'll add code to change the colour according to the values selected in the sliders. For now, run the program and try moving the slider thumbs by dragging, clicking and pressing the arrow keys.

WPF Slider control demo window

Setting the Range

You set the range of permissible values in a slider using two properties. Maximum and Minimum are both inherited from the RangeBase class, which was described in an earlier article. They hold double-precision floating-point numbers.

For the components of RGB colours, the easiest range of values to work with is 0 to 255. Update the XAML for the three sliders as follows to set the ranges accordingly.

<Slider Grid.Column="1" Minimum="0" Maximum="255"/>
<Slider Grid.Row="1" Grid.Column="1" Minimum="0" Maximum="255"/>
<Slider Grid.Row="2" Grid.Column="1" Minimum="0" Maximum="255"/>

Getting and Setting the Value

The initial value for a slider can be set in the XAML, using the Value attribute. You can also read and write the Value property from code. This property is defined in RangeBase. Let's add the code to set the colour of the Canvas according to the red, green and blue component values from the sliders. To detect changes we'll use the ValueChanged event.

To register the events, update the XAML for the sliders:

<Slider Name="RedSlider"
        Grid.Column="1"
        Minimum="0"
        Maximum="255"
        ValueChanged="SliderChanged"/>
<Slider Name="GreenSlider"
        Grid.Row="1"
        Grid.Column="1"
        Minimum="0"
        Maximum="255"
        ValueChanged="SliderChanged"/>
<Slider Name="BlueSlider"
        Grid.Row="2"
        Grid.Column="1"
        Minimum="0"
        Maximum="255"
        ValueChanged="SliderChanged"/>

We can now add the code that generates a colour from the three slider values and applies it to the canvas, as follows:

private void SliderChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    var r = (byte)RedSlider.Value;
    var g = (byte)GreenSlider.Value;
    var b = (byte)BlueSlider.Value;
    var color = Color.FromRgb(r, g, b);

    if (ColourCanvas != null)
    {
        ColourCanvas.Background = new SolidColorBrush(color);
    }
}

Run the program and adjust the sliders to see the colour changing.

26 June 2014