ProgressBar Control For Windows 10

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 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 to the first:

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

Step 3: Run the application and move the slide accordingly.