Loading Control In UWP

Loading Control is used for showing an animation with some content when the user is waiting in between some tasks of the app. Loading Control is from UWP Community Toolkit. The UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10.

Reading this article, you will learn how to use Loading Control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing the UWP.

1. Windows 10 (Recommended)
2. Microsoft Visual Studio 2017
3. Windows Anniversary Update (10.0.14393.0)

Step 1

Open Visual Studio 2017. Go to Start -> New Project -> select Windows Universal (under Visual C#) -> Blank App (Universal Windows). Now, give a suitable name for your app (UWPLoading) ->OK.

 

After choosing the target and minimum platform versions that your UWP application will support (Windows Anniversary Update (10.0.14393.0)), the project creates App.xaml and MainPage.xaml.

 

Step 2

First, update the reference, Microsoft.NETCore.UniversalWindowsPlatform with the latest version of it via "Manage NuGet Packages".

Step 3

Add the following controls in design window for Loading Control View. Add the TextBlock, Button controls, and change the Name and Text properties of those.

 

Add an image for background in Assets folder

Add the Loading Control and set the Name, and IsLoading properties for Progress Ring Control with image background.

<Controls:Loading x:Name="LoadPRing" IsLoading="False" Margin="10,0,0,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="Azure">
    <StackPanel Orientation="Horizontal" Padding="12">
        <Grid Height="134" Width="134">
            <Image Source="Assets/cscorner.png" Margin="0,10,0,0" />
            <ProgressRing IsActive="True" Foreground="DarkBlue" /> </Grid>
        <TextBlock Text="Loading... Please wait.. :)" Foreground="Black" VerticalAlignment="Center" Height="24" Width="202" /> </StackPanel>
</Controls:Loading>

 

Add one more Loading Control and set the Name and IsLoading properties for Progress Bar Control with Image background.

<Controls:Loading x:Name="LoadPbar" IsLoading="False" Margin="-46,0,0,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="Azure">
    <StackPanel Orientation="Horizontal" Padding="12">
        <Grid Height="134" Width="76">
            <Image Source="Assets/cscorner.png" Height="50" Margin="0,42,0,42" />
            <ProgressBar IsIndeterminate="True" Width="200" Foreground="DarkGreen" /> </Grid>
        <TextBlock Text="Loading... Please wait.. :)" Foreground="Black" VerticalAlignment="Center" Height="24" Width="202" /> </StackPanel>
</Controls:Loading>

Step 4

Add the following source code to Mainpage.Xaml.cs.

private void btnPRing_Click(object sender, RoutedEventArgs e) {
    LoadPRing.IsLoading = true;
    LoadPbar.IsLoading = false;
}
private void btnPBar_Click(object sender, RoutedEventArgs e) {
    LoadPRing.IsLoading = false;
    LoadPbar.IsLoading = true;
}

Note

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

<Page x:Class="UWPLoading.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPLoading" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls" mc:Ignorable="d">
    <Grid Background="White">
        <StackPanel HorizontalAlignment="Center" Margin="90,116,896,376" Width="514">
            <Controls:Loading x:Name="LoadPRing" IsLoading="False" Margin="10,0,0,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="Azure">
                <StackPanel Orientation="Horizontal" Padding="12">
                    <Grid Height="134" Width="134">
                        <Image Source="Assets/cscorner.png" Margin="0,10,0,0" />
                        <ProgressRing IsActive="True" Foreground="DarkBlue" /> </Grid>
                    <TextBlock Text="Loading... Please wait.. :)" Foreground="Black" VerticalAlignment="Center" Height="24" Width="202" /> </StackPanel>
            </Controls:Loading>
            <Controls:Loading x:Name="LoadPbar" IsLoading="False" Margin="-46,0,0,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="Azure">
                <StackPanel Orientation="Horizontal" Padding="12">
                    <Grid Height="134" Width="76">
                        <Image Source="Assets/cscorner.png" Height="50" Margin="0,42,0,42" />
                        <ProgressBar IsIndeterminate="True" Width="200" Foreground="DarkGreen" /> </Grid>
                    <TextBlock Text="Loading... Please wait.. :)" Foreground="Black" VerticalAlignment="Center" Height="24" Width="202" /> </StackPanel>
            </Controls:Loading>
            <StackPanel Orientation="Horizontal" Height="53" Margin="71,0,0,0">
                <Button x:Name="btnPRing" Content="Progress Ring" Click="btnPRing_Click" Width="127" />
                <Button x:Name="btnPBar" Content="Progress Bar" Click="btnPBar_Click" RenderTransformOrigin="1.359,0.531" /> </StackPanel>
        </StackPanel>
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="148,56,0,0" TextWrapping="Wrap" Text="Loading Control in UWP" VerticalAlignment="Top" Height="29" Width="265" FontSize="20" FontWeight="Bold" /> </Grid>
</Page>

Step 5

Deploy your app on the local machine. The output of the UWPLoading is shown below.

 
After clicking the ProgressRing button

After clicking the ProgressBar button

Summary

Now, you have successfully tested Loading Control in XAML and UWP environment using Visual Studio 2017.