Progress Bar and Progress Ring in Windows Phone 8.1

Introduction

This article shows how to show a Progress Bar and Progress Ring in Windows Phone 8.1 as well as Progress Bar in an Indeterminate form.



Step 1

To build a Windows Phone 8.1 application, ensure you have Visual Studio 2013 and the Windows Phone 8.1 SDK installed in your system.

Go to "New Project". Under "Installed" > "Templates" > "Visual C#" > "Store Apps" select "Windows Phone Apps" then select "Blank App (Windows Phone)" and provide it a name as you choose (here I am using "ProgressBarAndRingWP8.1").

Step 2

Navigate to the "MainPage.xaml" section of the project and add a "TextBlock" Control.

<Grid>

<TextBlock Text="Progress Bar :" FontSize="25" Width="200" Margin="16,57,184,549" />

</Grid>

Now add a Progress Bar to your project:

<Grid>

<TextBlock Text="Progress Bar :" FontSize="25" Width="200" Margin="16,57,184,549" />
<ProgressBar x:Name="myProgressBar" Minimum="0" Maximum="200" Value="40" Height="45" Margin="12,98,12,497"/>

</Grid>

Now your MainPage will be like this:



Step 2

Add again a TextBlock to your project with the text "Progress Ring" and a ProgressRing control to the project:

<Grid>

<TextBlock Text="Progress Bar :" FontSize="25" Width="200" Margin="16,57,184,549" />
<ProgressBar x:Name="myProgressBar" Minimum="0" Maximum="200" Value="40" Height="45" Margin="12,98,12,497"/>
<TextBlock Text="Progress Ring :" FontSize="25" Width="200" Margin="16,211,184,395" />
<ProgressRing x:Name="myProgressRing" IsActive="True" Height="90" Width="90" />

</Grid>

Initially you won't see any Progress Ring, it will only be shown at runtime, that is when you run the application.

Step 3

Now finally add a similar TextBlock with the text "Indeterminate Progressbar:" and a ProgressBar control.

<Grid>

<TextBlock Text="Progress Bar :" FontSize="25" Width="200" Margin="16,57,184,549" />
<ProgressBar x:Name="myProgressBar" Minimum="0" Maximum="200" Value="40" Height="45" Margin="12,98,12,497"/>
<TextBlock Text="Progress Ring :" FontSize="25" Width="200" Margin="16,211,184,395" />
<ProgressRing x:Name="myProgressRing" IsActive="True" Height="90" Width="90" />
<TextBlock Text="Indeterminate Progressbar :" FontSize="25" Margin="16,407,43,199" />
<ProgressBar x:Name="myIndeterminateProbar" IsIndeterminate="True" Height="70" Margin="10,456,-10,134"/>

</Grid>

In this it is only shown at runtime.

Step 4

That's it. Compile and run the project . You will see the ProgressBars. You can control it easily with your C# code using their properties.



That's all for this short article.You will see more on Windows Phone 8.1 in our future articles for Windows Phone 8.1.

I am including the source code also.

Thanks.