Getting Started with UWP Progress Bar

18 Nov 20182 minutes to read

This section explains how to convey the task progress in an application using UWP Progress Bar control.

Adding UWP Progress Bar Control

Create a Universal Windows Platform project in Visual Studio and refer to the “Syncfusion.SfProgressBar.UWP” assembly.

1.Include the namespace ”Syncfusion.UI.Xaml.Controls.Notification” for Syncfusion.SfProgressBar.UWP assembly in MainPage.xaml

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

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

xmlns:notification="using:Syncfusion.UI.Xaml.Controls.Notification">

2.Now add the UWP Progress Bar control with a required optimal name using the included namespace

<notification:SfProgressBar x:Name="progressBar"/>

Choosing Progress Type

Select a type from the available built-in progress bar types and set it using ProgressType property.

<notification:SfProgressBar x:Name="progressBar" ProgressType="SolidCircular"  />
SfProgressBar progressBar = new SfProgressBar() { ProgressType = ProgressTypes.SolidCircular };
Dim progressBar As New SfProgressBar() With {.ProgressType = ProgressTypes.SolidCircular}

Displaying Percentage Value

Set the property DisplayContentMode to Percentage for enabling text displaying percentage completed.

<notification:SfProgressBar x:Name="progressBar" ProgressType="SolidCircular"  DisplayContentMode="Percentage"/>
SfProgressBar progressBar = new SfProgressBar()
{
    ProgressType = ProgressTypes.SolidCircular,
    DisplayContentMode = DisplayContentMode.Percentage
};
Dim progressBar As New SfProgressBar() With {
    .ProgressType = ProgressTypes.SolidCircular,
    .DisplayContentMode = DisplayContentMode.Percentage
}

Progress Animation using Value

Here is an example using DispatcherTimer to set the Value property in specified interval.

<notification:SfProgressBar x:Name="progressBar" ProgressType="SolidCircular"  DisplayContentMode="Percentage"/>
public sealed partial class MainPage : Page

{

DispatcherTimer timer = new DispatcherTimer() { Interval = TimeSpan.FromSeconds(0.1) };



public MainPage()

{

this.InitializeComponent();

timer.Tick += timer_Tick;

timer.Start();

}



void timer_Tick(object sender, object e)

{

if(progressBar.Value <= 100.0)

    progressBar.Value += 1.0;

else
{

timer.Stop();

timer.Tick -= timer_Tick;

}

}

}