Slider Control For Windows 10

Introduction

 

Slider control represents a control that lets the user select from a range of values by moving a Thumb control along a track.

 

In the following demo, we are going to change the font size of a text by a moving slider.

 

Step 1

 

Open a blank app and add Slider and Textblock control either from the toolbox or by copying the following XAML code into your grid.

<TextBlock Text="Slider Control" FontSize="20"></TextBlock>
<StackPanel>
    <StackPanel Margin="50,100,0,0" Orientation="Horizontal">
        <TextBlock Text="Slider" Margin="0,7,0,0"></TextBlock>
        <Slider Name="mySlider" Minimum="1" Maximum="50" Width="200" Value="50" Margin="15,0,0,0"></Slider>
    </StackPanel>
    <TextBlock Text="Sample Text" HorizontalAlignment="Center" Margin="0,50,0,0"></TextBlock>
</StackPanel>

 

 

Step 2

 

Now we want to bind the font-size value of the TextBlock to the slider. Add the following code to the slider control. Here the Mode one defines that the changing value in the second element will not reflect the first.

FontSize = "{x:Bind mySlider.Value, Mode=OneWay}"

Step 3

 

Run the application and move the slide accordingly. 

 

 

Summary 

 

In this article, we learned about Slider Control For Windows 10.