.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 Orientation
Sliders can be configured so that the value is changed by moving the thumb from side to side or up and down. To switch between horizontal and vertical orientation, you can set the Orientation property. The property accepts a value from the Orientation enumeration, which defines constants for Horizontal and Vertical.
To demonstrate, we'll add a fourth slider. This will have a vertical orientation and will be used to set the alpha component, which determines how opaque the colour is. We'll also add an ellipse behind the Canvas, so that we see the transparency.
Replace the XAML for the entire window with the code below. Note the configuration of the new Slider and the position of the Ellipse.
<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 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"/>
<Slider Name="AlphaSlider"
Grid.Row="3"
Orientation="Vertical"
HorizontalAlignment="Right"
Minimum="0"
Maximum="255"
Value="255"
ValueChanged="SliderChanged"/>
<Ellipse Grid.Row="3" Grid.Column="1" Stroke="Black" Fill="Red"/>
<Canvas Grid.Row="3" Grid.Column="1" Background="Black" Name="ColourCanvas"/>
</Grid>
</Window>To add the alpha component we need to modify the code that executes when a slider is moved. Replace the code for the event with the following:
private void SliderChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
var r = (byte)RedSlider.Value;
var g = (byte)GreenSlider.Value;
var b = (byte)BlueSlider.Value;
var a = (byte)AlphaSlider.Value;
var color = Color.FromArgb(a, r, g, b);
if (ColourCanvas != null)
{
ColourCanvas.Background = new SolidColorBrush(color);
}
}Run the program to see the results. You should see the new slider to the left of the coloured Canvas control. Try changing its value to see the colour become transparent, revealing the ellipse.
Switching the Slider Direction
By default, horizontal Sliders have the minimum value at the left and the maximum at the right. Vertically oriented controls have the larger values above the smaller ones. For some applications it is preferable to reverse this. To do so, set the IsDirectionReversed property to true.
To demonstrate, swap the direction of the alpha slider by updating its XAML as shown below.
<Slider Name="AlphaSlider"
Grid.Row="3"
Orientation="Vertical"
HorizontalAlignment="Right"
IsDirectionReversed="True"
Minimum="0"
Maximum="255"
Value="255"
ValueChanged="SliderChanged"/>Try running the program and adjusting the slider to see the results.
26 June 2014