How To Use ProgressRing Control In Universal Application Development With XAML And C#

How to use ProgressRing Control in Universal Application Development with XAML and C#.
Before reading this article, please go through the article's link, given below:

Reading this article, you can learn, how to use ProgressRing Control in Universal Windows apps development with XAML and Visual C#.

The following important tools are required to develop UWP.

  1. Windows 10 (Recommended).
  2. Visual Studio 2015 Community Edition (It is a free software available online).

Now, we can discuss step by step app development.

Step1: Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give the suitable name for your app (UWPProgressRing) ->OK. 

Blank App

Step 2: Choose the Target and minimum platform version your Windows Universal Application will support. Afterwards, the project creates App.xaml and MainPage.xaml.

version

Step 3: Open (double click) the file MainPage.xaml in the Solution Explorer and click on the Toolbox tab on the left to open the list of Common XAML controls. Expand Common XAML Controls and drag the required control to the middle of the design canvas.

Add TextBlock control and change the name and text property.

Add TextBlock control

Afterwards, drag and drop the ProgressRing control. You have to change the Name property and enable ISActive Property.

ProgressRing

Change the size in the ProgressRing Control.

size in the ProgressRing Control

Note: Automatically, the following code will be generated in XAML code view, while we are done in the design view.

  1. <Page x:Class="UWPProgressRing.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPProgressRing" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <TextBlock x:Name="tblPRing" HorizontalAlignment="Left" Margin="121,97,0,0" TextWrapping="Wrap" Text="Progress Ring Test" VerticalAlignment="Top" />  
  4.         <ProgressRing x:Name="PRtest" HorizontalAlignment="Left" Margin="174,177,0,0" VerticalAlignment="Top" IsActive="True" Width="50" Height="50" /> </Grid>  
  5. </Page>  
Step 4: Deploy your app in the local machine and the output of the UWPProgressRing App is given below

output

Summary: Now, you successfully created and tested your ProgressRing Control in Visual C# - UWP environment. 

Up Next
    Ebook Download
    View all
    Learn
    View all