XAML Slider Control

This article shows how create and use a slider control using XAML.
  • 7000
The Slider XAML element represents a slider control in XAML. A slider control's default minimum and maximum values are 0 and 10.

The Maximim and Minimum attributes are used to set minimum and maximum values of a slider control.

<Slider Height="23" HorizontalAlignment="Left" Margin="26,34,0,0"
"slider1" VerticalAlignment="Top" Width="250"
"0" Maximum="100"  />

Now, let's create a sample where slider action will change the value of a ProgressBar control.


In the below code, the key is setting the Value property of ProgressBar to Bind with the value of the Slider using ElementName.

Value="{Binding Path=Value, ElementName=Slider

Here is the complete sample.







      Width="640" Height="480"> 

      <Grid x:Name="LayoutRoot">

            <Slider RenderTransformOrigin="0.501,0.622" Margin="81,161.66,66,0"

            x:Name="Slider" Style="{DynamicResource SimpleSlider}"

            VerticalAlignment="Top" Height="22" Maximum="100" Minimum="0" Value="0"



                              <ScaleTransform ScaleX="-1" ScaleY="-1"/>

                              <SkewTransform AngleX="0" AngleY="0"/>

                              <RotateTransform Angle="179.863"/>

                              <TranslateTransform X="-0.954" Y="-9.028"/>




                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">

                              <GradientStop Color="#FFFFFFFF" Offset="0"/>

                              <GradientStop Color="#FFF5A544" Offset="1"/>




            <ProgressBar Margin="80,119,63,0" Style="{DynamicResource SimpleProgressBar}"

             VerticalAlignment="Top" Height="20"

             Value="{Binding Path=Value, ElementName=Slider, Mode=Default}">


                        <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">

                              <GradientStop Color="#FFBABABA" Offset="0"/>

                              <GradientStop Color="#FFC7C7C7" Offset="0.5"/>

                              <GradientStop Color="#FF5D9C1D" Offset="0.75"/>







Further Readings
You may also want to read these related articles.
Ask Your Question 
Got a programming related question? You may want to post your question here






© 2020 DotNetHeaven. All rights reserved.