Home > DeveloperSection > Beginner > Slider Control in WPF

Slider Control in WPF


WPF WPF 
Ratings:
0 Comment(s)
 8842  View(s)
Rate this:

Slider Control in WPF

In this tutorial I am going to explain you that how to use a slider control in WPF. The XAML <Slider /> element is used to create a slider control in WPF. Slider control has certain properties which need to be set before implementing concept of slider control in WPF.

Some important properties of slider control

Ø  Width—Width property is used to set width of the slider control.

Ø  Height—Height property is used to set height of the slider control.

Ø  X: Name—x: Name property is used to set a unique identifier to your slider control.

Ø  Minimum—Minimum values represents the value that your slider control can represent.

Ø  Maximum—Maximum value represents the maximum value that your slider control can represent.

Ø  Orientation—Orientation property represents orientation of your slider control. It has two values that are either vertical or horizontal.

Ø  Value—Value properties are used to get or set value of the slider control.

In this demonstration I am going to explain you that with the help of slider control how we can create a simple color chooser control.

Code snippet of demonstration

<Grid>

        <StackPanel Height="135" HorizontalAlignment="Left" Margin="95,24,0,0" x:Name="stackPanel1" VerticalAlignment="Top" Width="300" />

        <Slider Height="23" HorizontalAlignment="Left" Margin="95,184,0,0" x:Name="slider1" VerticalAlignment="Top" Width="260" Maximum="255" SmallChange="1" TickPlacement="TopLeft" Value="0" ValueChanged="slider1_ValueChanged" Orientation="Horizontal" Background="Red" />

        <Slider Height="23" HorizontalAlignment="Left" Margin="95,229,0,0" x:Name="slider2" VerticalAlignment="Top" Width="260" TickPlacement="TopLeft" Maximum="255" Minimum="0" SmallChange="1" ValueChanged="slider2_ValueChanged" Background="Lime" />

        <Slider Height="23" HorizontalAlignment="Left" Margin="95,267,0,0" x:Name="slider3" VerticalAlignment="Top" Width="260" SmallChange="1" TickPlacement="TopLeft" Maximum="255" ValueChanged="slider3_ValueChanged" Background="Blue" />

        <TextBlock Height="23" HorizontalAlignment="Left" Margin="361,184,0,0" x:Name="textBlock1" Text="Red" VerticalAlignment="Top" Width="34" />

        <TextBlock Height="23" HorizontalAlignment="Left" Margin="361,229,0,0" x:Name="textBlock2" Text="Green" VerticalAlignment="Top" Width="34" />

        <TextBlock Height="23" HorizontalAlignment="Left" Margin="361,267,0,0" x:Name="textBlock3" Text="Blue" VerticalAlignment="Top" Width="34" />

        <Button Content="Get Color" Height="23" HorizontalAlignment="Left" Margin="378,288,0,0" x:Name="button1" VerticalAlignment="Top" Width="113" Click="button1_Click" />

</Grid>

In the following code snippet I had used one stackpanel control which shows color that you make with slider control. Three slider control one for setting Red, another for setting Green and last one is used to setting for Blue color values. I had created one button control also in which after clicking we get color code which we created.

Output of the above code snippet

Slider Control in WPF

/// <summary>

        /// On the click event of the GetColor() button we het the color code

        /// which sets with the help of slider control and display it in message box.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            SolidColorBrush colorBrush = (SolidColorBrush)stackPanel1.Background;

            MessageBox.Show(colorBrush.Color.ToString());

        }

 

        /// <summary>

        /// This method is used to create color by taking values from

        /// slider one, two, three and then change the background color

        /// of stack panel.

        /// </summary>

 

        public void changeColor()

        {

            byte rr = (byte)slider1.Value; //Retriving values from slider1

            byte gg = (byte)slider2.Value; //Retriving values from slider2

            byte bb = (byte)slider3.Value; //Retriving values from slider3

            Color cc = Color.FromRgb(rr, gg, bb); //Create object of Color class.

            SolidColorBrush colorBrush = new SolidColorBrush(cc); //Creating object of SolidColorBruch class.

            stackPanel1.Background = colorBrush; //Setting background of stack panel.

        }

 

        /// <summary>

        /// This event is called when the window is first time loaded in memory

        /// And change the background of panel control.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

 

        private void Window_Loaded(object sender, RoutedEventArgs e)

        {

            changeColor();

        }

 

        /// <summary>

        /// This event is called whenever the value of slider1 control is changed.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

        {

            changeColor();

        }

 

        /// <summary>

        /// This event is called whenever the value of slider2 control is changed.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

 

        private void slider2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

        {

            changeColor();

        }

 

        /// <summary>

        /// This event is called whenever value of the slider3 control is changed.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

 

        private void slider3_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

        {

            changeColor();

        }

 

Output of the following code snippet is as follows

Slider Control in WPF

When user click on the Get Color button, then color code is retrieved in Message Box format.

Slider Control in WPF

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick