Getting Started with UWP Progress Bar (SfProgressBar)

This section explains how to convey the task progress in an application using SfProgressBar control.

Adding SfProgressBar 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 SfProgressBar 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"  />

Displaying Percentage Value

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

<notification:SfProgressBar x:Name="progressBar" ProgressType="SolidCircular"  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;

}

}

}