WPF Slider


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:

<Window

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      x:Class="SliderDB.Window1"

      x:Name="Window"

      Title="Window1"

      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"

         >

                  <Slider.RenderTransform>

                        <TransformGroup>

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

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

                              <RotateTransform Angle="179.863"/>

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

                        </TransformGroup>

                  </Slider.RenderTransform>

                  <Slider.Background>

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

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

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

                        </LinearGradientBrush>

                  </Slider.Background>

            </Slider>

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

             VerticalAlignment="Top" Height="20"

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

                  <ProgressBar.Background>

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

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

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

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

                        </LinearGradientBrush>

                  </ProgressBar.Background>

            </ProgressBar>

      </Grid>

</Window>

Up Next
    Ebook Download
    View all
    Learn
    View all
    Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.