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.

Progress baar in Windows phone

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.

  1. <Grid>  
  2.   
  3. <TextBlock Text="Progress Bar :" FontSize="25" Width="200" Margin="16,57,184,549" />  
  4.   
  5. </Grid>  
Now add a Progress Bar to your project:
  1. <Grid>  
  2.   
  3. <TextBlock Text="Progress Bar :" FontSize="25" Width="200" Margin="16,57,184,549" />  
  4. <ProgressBar x:Name="myProgressBar" Minimum="0" Maximum="200" Value="40" Height="45" Margin="12,98,12,497"/>  
  5.   
  6. </Grid>  
Now your MainPage will be like this:

create progress baar in Windows phone

Step 2

Add again a TextBlock to your project with the text "Progress Ring" and a ProgressRing control to the project:
  1. <Grid>  
  2.   
  3. <TextBlock Text="Progress Bar :" FontSize="25" Width="200" Margin="16,57,184,549" />  
  4. <ProgressBar x:Name="myProgressBar" Minimum="0" Maximum="200" Value="40" Height="45" Margin="12,98,12,497"/>  
  5. <TextBlock Text="Progress Ring :" FontSize="25" Width="200" Margin="16,211,184,395" />  
  6. <ProgressRing x:Name="myProgressRing" IsActive="True" Height="90" Width="90" />  
  7.   
  8. </Grid>  
Progress Ring control in Windows phone

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.
  1. <Grid>  
  2.   
  3. <TextBlock Text="Progress Bar :" FontSize="25" Width="200" Margin="16,57,184,549" />  
  4. <ProgressBar x:Name="myProgressBar" Minimum="0" Maximum="200" Value="40" Height="45" Margin="12,98,12,497"/>  
  5. <TextBlock Text="Progress Ring :" FontSize="25" Width="200" Margin="16,211,184,395" />  
  6. <ProgressRing x:Name="myProgressRing" IsActive="True" Height="90" Width="90" />  
  7. <TextBlock Text="Indeterminate Progressbar :" FontSize="25" Margin="16,407,43,199" />  
  8. <ProgressBar x:Name="myIndeterminateProbar" IsIndeterminate="True" Height="70" Margin="10,456,-10,134"/>  
  9.   
  10. </Grid>  
ProgressBar control

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.

Show Progress Bar in windows phone

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.


Similar Articles