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.