WPF Slider

This article shows how create and use a slider control using WPF and XAML.
  • 3888

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"
Name="slider1" VerticalAlignment="Top" Width="250"
Minimum="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"/>


More Articles

© 2020 DotNetHeaven. All rights reserved.