ProgressBar Control For Windows 10

Introduction 

 

ProgressBar represents a control that indicates the progress of an operation, where the typical visual appearance is a bar that animates a filled area as progress continues.

 

In the following demo, we are going to change the value of ProgressBar by moving the slider.

 

Step 1

 

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

<TextBlock Text="Progress Bar" FontSize="20"></TextBlock>
<StackPanel>
    <StackPanel Orientation="Horizontal" Margin="15,80,0,0">
        <TextBlock VerticalAlignment="Center" Text="Slider"></TextBlock>
        <Slider Name="mySlider" Width="200" Minimum="0" Maximum="100" Value="0" Margin="55,0,0,0"></Slider>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="15,30,0,0">
        <TextBlock Text="Progress Bar"></TextBlock>
        <ProgressBar Width="200" Minimum="0" Maximum="100" Margin="15,0,0,0"></ProgressBar>
    </StackPanel>
</StackPanel>

 

 

 

Step 2

 

Now we want to bind the Progress value of the ProgressBar to the slider. Add the following code to the ProgessBar control. Here the Mode one defines the changing value in the second element will not reflect the first.

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

Step 3

 

Run the application and move the slide accordingly.

 

 

Summary 

 

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