Getting Started with UWP Progress Bar (SfProgressBar)

25 May 20211 minute to read

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

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

XAML

<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.

XAML

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

Displaying Percentage Value

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

XAML

<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.

XAML

<notification:SfProgressBar x:Name="progressBar" ProgressType="SolidCircular"  DisplayContentMode="Percentage"/>

C#

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;

}

}

}