Using XAML Slider in WPF

The XAML Slider element represents a slider. This article shows you how to use a Slider in WPF.

Slider Control

The Slider element in XAML represents a WPF Slider control.          

<Slider></Slider>

Slider Control Properties

The Width and Height properties represent the width and the height of the control. The x:Name property represents the name of the control and is a unique identifier of the control. The Background property is used to set the background color of the control. The Minimum and Maximum properties represent the minimum and maximum values of the slider range.

The code snippet in Listing 1 creates a Slider control and sets its name, height, width, background, maximum and minimum properties.

<Slider x:Name="mcSlider" Width="300" Height="20"
        Background="Gray" Maximum="100" Minimum="0">
</Slider>

Listing 1

The code snippet in Listing 1 generates output that looks as in Figure 1.

Figure 1

The IsFocused property indicates whether the slider control has the focus and the IsDirectionReversed property represents the direction of the increasing value. By default, the slider control sits on the UI in a horizontal direction. Using the Orientation property, a slider control can be placed vertically.

The code snippet in Listing 2 sets the orientation of a slider control to vertical.

<Slider x:Name="mcSlider" Width="30" Height="300"
Background="Gray" Maximum="100" Minimum="0" Orientation="Vertical" >
</Slider>

Listing 2

The code snippet in Listing 2 generates output that looks as in Figure 2.

                                          
                                                Figure 2

The Application

Now we will create a real-world application that will use Slider control values to create a color from the three values Red, Green and Blue respectively. From these three values, we will create a color and fill an ellipse with that color.

First we create a UI page with one circle and three slider controls that looks as in Figure 3.


Figure 3

The code that generates Figure 3 is listed in Listing 2.

<Canvas x:Name="LayoutRoot" Background="LightGray" >
    <!-- Create an Ellipse -->
    <Ellipse x:Name="mcCircle" Width="200" Height="200"
            Canvas.Left="60" Canvas.Top="20"
             Fill="Gray" Stroke="Black" StrokeThickness="2">
    </Ellipse>

    <!-- Create Slider controls -->
    <Slider x:Name="RedSlider" Width="300" Height="20"
            Background="Red" Maximum="255" Minimum="0"
            Canvas.Left="30" Canvas.Top="240"
            ValueChanged="RedSlider_ValueChanged"/>
    <Slider x:Name="GreenSlider" Width="300" Height="20"
            Background="Green" Maximum="255" Minimum="0"
            Canvas.Left="30" Canvas.Top="270"
            ValueChanged="GreenSlider_ValueChanged"/>
    <Slider x:Name="BlueSlider" Width="300" Height="20"
            Background="Blue" Maximum="255" Minimum="0"
            Canvas.Left="30" Canvas.Top="300"
            ValueChanged="BlueSlider_ValueChanged"/>
</Canvas>

Listing 2

Now, on the ValueChanged event of the slider controls, we write the code listed in Listing 3. In this code, we simply create a Color from the values of the slider controls and create a brush with this color and fill in the circle.

private void RedSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    UpdateCircleWithColors();
}

private void GreenSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    UpdateCircleWithColors();
}

private void BlueSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    UpdateCircleWithColors();
}

private void UpdateCircleWithColors()
{
    Color clr = Color.FromArgb(255, Convert.ToByte(RedSlider.Value),
        Convert.ToByte(GreenSlider.Value), Convert.ToByte(BlueSlider.Value));
    mcCircle.Fill = new SolidColorBrush(clr);
}

Listing 3

Now if you run the application and change the slider values, you will see the fill color of the circle change accordingly. See Figure 4.


Figure 4

Summary

In this article, I discussed how to create and use a Slider control available in WPF. We also saw how to create a real-world application using slider controls.