Slider Control in WPF
This article shows you how to use the Slider control
available in WPF.
Slider Control
The Slider element in
XAML represents a WPF Slider control.
<Slider></Slider>
Slider Control Properties
The Width and Height
property represent the width and the height of the control. The Name property represents name of the
control, which 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 Name="mcSlider"
Width="300" Height="20"
Background="Gray" Maximum="100" Minimum="0">
</Slider>
Listing 1
The code snippet in
Listing 1 generates output looks like Figure 1.
Figure 1
The IsFocused property
indicates whether the slider control has focus and IsDirectionReversed property
represents the direction of increasing value. By default, the slider control
sits on UI in horizontal direction. By using the Orientation property, a slider
control can be placed vertically.
The code snippet in
Listing 2 sets the orientation of a slider control vertical.
<Slider Name="mcSlider"
Width="300" Height="20"
Background="Gray" Maximum="100" Minimum="0">
</Slider>
Listing 1
The code snippet in
Listing 2 generates output looks like Figure 2.
Figure 2
The Application
Now we are going to create a real world application that
will use Slider controls values to create a color from 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 like Figure 3.
Figure 3
The code that generates Figure 3 is listed in Listing 2.
<Canvas Name="LayoutRoot"
Background="LightGray" >
<!-- Create an
Ellipse -->
<Ellipse Name="mcCircle"
Width="200" Height="200"
Canvas.Left="60" Canvas.Top="20"
Fill="Gray" Stroke="Black" StrokeThickness="2">
</Ellipse>
<!-- Create Slider
controls -->
<Slider Name="RedSlider"
Width="300" Height="20"
Background="Red" Maximum="255" Minimum="0"
Canvas.Left="30" Canvas.Top="240"
ValueChanged="RedSlider_ValueChanged"/>
<Slider Name="GreenSlider"
Width="300" Height="20"
Background="Green" Maximum="255" Minimum="0"
Canvas.Left="30" Canvas.Top="270"
ValueChanged="GreenSlider_ValueChanged"/>
<Slider 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 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 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 slider values, you
will see the fill color of circle changes 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.