Progress Bar in Windows Store App

In this article we will explain how can we use progress bar in metro style application.

Introduction

Today we will use one of the important controls in Metro style applications. It is the best tool to show the progress of any specific task at run time. With the help of a progress bar we can guide user to wait for the next task until your current task is completed.

Here we are implementing a progress bar that is used to show the progress of a form filling status, so to do it we are using four textboxes with a progress bar control.

Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.

  • Open Visual Studio 2011
  • File -> New -> Project
  • Choose Template -> Visual C# ->Metro Style Application
  • Rename this Application

img1.gif

Step 2 : In the Solution Explorer there are two files that we will primarily work with; BlankPage.xaml and BlankPage.xaml.cs files.

img2.gif

Step 3 : The BlankPage.xaml file is as in the following code:

Code :

<Page

    x:Class="Application30.BlankPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Application30"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">


   
<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
       <Grid x:Name="ContentRoot" Background="LimeGreen" Margin="100,20,100,20">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="*"/>

                <RowDefinition Height="Auto"/>

            </Grid.RowDefinitions>

 

            <!-- Content -->

 

            <Grid HorizontalAlignment="Center" VerticalAlignment="Top">

                 <StackPanel>

                    <TextBlock Text="Progress Bar in Metro Apps" FontSize="30" Foreground="Black"></TextBlock>

                    <ProgressBar x:Name="myBar" Foreground="Red"  Background="White"  BorderBrush="Blue"

                  Maximum="100"   Width="200"   Height="20"   Margin="15"/>

                    <TextBlock  x:Name="blk1" FontSize="10" Margin="15"></TextBlock>

                    <TextBlock Text="Fill The Form" FontSize="25" Foreground="Blue" Margin="15"></TextBlock>

                    <TextBox x:Name="txt1" Text="First Name"  Width="200"   Height="20"  Margin="10"  GotFocus="txt1_GotFocus_1"  ></TextBox>

                    <TextBox x:Name="txt2" Text="Last Name"  Width="200"   Height="20"  Margin="10"  GotFocus="txt2_GotFocus_1"  ></TextBox>

                    <TextBox x:Name="txt3" Text="Address"  Width="200"   Height="20"  Margin="10" GotFocus="txt3_GotFocus_1"   ></TextBox>

                    <TextBox x:Name="txt4" Text="Course"  Width="200"   Height="20"  Margin="10"   GotFocus="txt4_GotFocus_1"  ></TextBox>

                </StackPanel>

             </Grid>

        </Grid>

     </Grid>

</Page>


 Step 4 : After running this code the output will look like this:

 

img3.gif

 

As you fill in the form, the progress bar will show the status:

 

img4.gif