title: adding a progress bar when navigating from page to another in windws 8 apps using xaml
body: <p>I am developing a windows 8 application and I want to add a progress bar to my pages when navigating from one to another since users will have to wait in order for the data to be loaded from the server. Can anyone provide me with the code that I need to add in XAML and C#? What property or event of the progress bar should be used?</p>
  
  <p>//XAML PAGE</p>
  
  <pre><code>    &lt;common:LayoutAwarePage
      x:Name="Hub1"
      x:Class="App1.GroupedItemsPage1"
      DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
      IsTabStop="false"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:App1"
      xmlns:data="using:App1.Data"
      xmlns:common="using:App1.Common"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"&gt;
  
      &lt;Page.BottomAppBar&gt;
          &lt;AppBar&gt;
              &lt;Grid&gt;
                  &lt;Button x:Name="Content_Hub"  Height="64" Margin="45,10,0,10" Width="145" Content="CONTENT HUB" FontSize="12" FontFamily="Segui" Click="Content_Hub_Click"/&gt;
                  &lt;Button x:Name="MARKET_RESEARCH"  Height="64" Margin="220,10,0,10" Width="145" Content="MARKET RESEARCH" FontSize="12" FontFamily="Segui" Click="MARKET_RESEARCH_Click"/&gt;
                  &lt;Button x:Name="LEAD_CONVERSION"  Height="64" Margin="400,10,0,10" Width="145" Content="LEAD CONVERSION" FontSize="12" FontFamily="Segui"/&gt;
                  &lt;StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right"&gt;
                      &lt;Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Help"/&gt;
                      &lt;StackPanel.ChildrenTransitions&gt;
                          &lt;TransitionCollection&gt;
                              &lt;AddDeleteThemeTransition/&gt;
                          &lt;/TransitionCollection&gt;
                      &lt;/StackPanel.ChildrenTransitions&gt;
                  &lt;/StackPanel&gt;
              &lt;/Grid&gt;
          &lt;/AppBar&gt;
      &lt;/Page.BottomAppBar&gt;
  
      &lt;Page.Resources&gt;
  
          &lt;!--
              Collection of grouped items displayed by this page, bound to a subset
              of the complete item list because items in groups cannot be virtualized
          --&gt;
          &lt;CollectionViewSource
              x:Name="groupedItemsViewSource"
              Source="{Binding Groups}"
              IsSourceGrouped="true"
              ItemsPath="TopItems"
              d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:DataSource, IsDesignTimeCreatable=True}}"/&gt;
  
      &lt;/Page.Resources&gt;
  
      &lt;!--
          This grid acts as a root panel for the page that defines two rows:
          * Row 0 contains the back button and page title
          * Row 1 contains the rest of the page layout --&gt;
  
     &lt;Grid Style="{StaticResource LayoutRootStyle}"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="140" /&gt;
              &lt;RowDefinition Height="*"/&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Grid&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="Auto"/&gt;
                  &lt;ColumnDefinition Width="*"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=Pageroot}" Style="{StaticResource BackButtonStyle}" Margin="36,0,0,36" Grid.Row="0"/&gt;
              &lt;StackPanel x:Name="Header" Grid.Row="0" Grid.Column="1" &gt;
                  &lt;StackPanel Orientation="Horizontal"&gt;
                      &lt;Image HorizontalAlignment="Left" Height="Auto" Margin="35,30,0,0" VerticalAlignment="Top" Width="202" Source="Assets/ACE-Logo.png"&gt;&lt;/Image&gt;
                  &lt;/StackPanel&gt;
              &lt;/StackPanel&gt;
          &lt;/Grid&gt;
          &lt;ProgressRing x:Name="progressBar" VerticalAlignment="Top" /&gt;
          &lt;!-- Horizontal scrolling grid used in most view states --&gt;
         &lt;SemanticZoom Name="Zoom" Grid.Row="1"&gt;
             &lt;SemanticZoom.ZoomedInView&gt;
         &lt;GridView
              x:Name="itemGridView"
              AutomationProperties.AutomationId="ItemGridView"
              AutomationProperties.Name="Grouped Items"
              Grid.Row="1"
              Margin="0,-3,0,0"
              Padding="116,0,40,46"
              ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
              ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
              SelectionMode="None"
              IsItemClickEnabled="True"
              ItemClick="ItemView_ItemClick"&gt;
  
                      &lt;GridView.ItemsPanel&gt;
                          &lt;ItemsPanelTemplate&gt;
                              &lt;VirtualizingStackPanel Orientation="Horizontal"/&gt;
                          &lt;/ItemsPanelTemplate&gt;
                      &lt;/GridView.ItemsPanel&gt;
                      &lt;GridView.GroupStyle&gt;
                          &lt;GroupStyle&gt;
                              &lt;GroupStyle.HeaderTemplate&gt;
                                  &lt;DataTemplate&gt;
                                      &lt;Grid Margin="1,0,0,6"&gt;
                                          &lt;Button
                                      AutomationProperties.Name="Group Title"
                                      Content="{Binding Title}"
                                      Style="{StaticResource TextButtonStyle}" 
                                      /&gt;
                                      &lt;/Grid&gt;
                                  &lt;/DataTemplate&gt;
                              &lt;/GroupStyle.HeaderTemplate&gt;
                              &lt;GroupStyle.Panel&gt;
                                  &lt;ItemsPanelTemplate&gt;
                                      &lt;VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/&gt;
                                  &lt;/ItemsPanelTemplate&gt;
                              &lt;/GroupStyle.Panel&gt;
                          &lt;/GroupStyle&gt;
                      &lt;/GridView.GroupStyle&gt;
                  &lt;/GridView&gt;
               &lt;/SemanticZoom.ZoomedInView&gt;
              &lt;SemanticZoom.ZoomedOutView&gt;
                  &lt;GridView x:Name="ZoomedOutGV"  VerticalAlignment="Center"&gt;
                      &lt;GridView.ItemTemplate&gt;
                          &lt;DataTemplate&gt;
                              &lt;StackPanel&gt; 
                                  &lt;TextBlock Text="{Binding Group.Title}" Width="200" Height="200" Foreground="Blue"/&gt;
                              &lt;/StackPanel&gt;
                           &lt;/DataTemplate&gt;
                      &lt;/GridView.ItemTemplate&gt;
                    &lt;GridView.ItemsPanel&gt;
                          &lt;ItemsPanelTemplate&gt;
                              &lt;StackPanel Orientation="Horizontal" HorizontalAlignment="Center"&gt;
                              &lt;/StackPanel&gt;
                          &lt;/ItemsPanelTemplate&gt;
                      &lt;/GridView.ItemsPanel&gt;
              &lt;/GridView&gt;
              &lt;/SemanticZoom.ZoomedOutView&gt;
         &lt;/SemanticZoom&gt;
  
  
         &lt;!--   Vertical scrolling list only used when snapped --&gt;
           &lt;ListView
              x:Name="itemListView"
              AutomationProperties.AutomationId="ItemListView"
              AutomationProperties.Name="Grouped Items"
              Visibility="Collapsed"
              Margin="0,135,0,0"
              Padding="10,0,0,60"
              ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
              ItemTemplate="{StaticResource Standard80ItemTemplate}"
              SelectionMode="None"
              IsItemClickEnabled="True"
              ItemClick="ItemView_ItemClick" Grid.RowSpan="2"&gt;
  
              &lt;ListView.GroupStyle&gt;
                  &lt;GroupStyle&gt;
                      &lt;GroupStyle.HeaderTemplate&gt;
                          &lt;DataTemplate&gt;
                              &lt;Grid Margin="7,7,0,0"&gt;
                                   &lt;Button
                                      AutomationProperties.Name="Group Title"
                                      Content="{Binding Title}"
  
                                      Style="{StaticResource TextButtonStyle}"/&gt;
                              &lt;/Grid&gt;
                          &lt;/DataTemplate&gt;
                      &lt;/GroupStyle.HeaderTemplate&gt;
                  &lt;/GroupStyle&gt;
              &lt;/ListView.GroupStyle&gt;
          &lt;/ListView&gt;
  
          &lt;VisualStateManager.VisualStateGroups&gt;
  
              &lt;!-- Visual states reflect the application's view state --&gt;
              &lt;VisualStateGroup x:Name="ApplicationViewStates"&gt;
                  &lt;VisualState x:Name="FullScreenLandscape"/&gt;
                  &lt;VisualState x:Name="Filled"/&gt;
  
                  &lt;!-- The entire page respects the narrower 100-pixel margin convention for portrait --&gt;
                  &lt;VisualState x:Name="FullScreenPortrait"&gt;
                      &lt;Storyboard&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
  
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="96,0,10,56"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
  
                  &lt;!--
                      The back button and title have different styles when snapped, and the list representation is substituted
                      for the grid displayed in all other view states
                  --&gt;
                  &lt;VisualState x:Name="Snapped"&gt;
                      &lt;Storyboard&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                          &lt;!--&lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;--&gt;
  
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
              &lt;/VisualStateGroup&gt;
          &lt;/VisualStateManager.VisualStateGroups&gt;
      &lt;/Grid&gt;
  &lt;/common:LayoutAwarePage&gt;
  
  //C# Page
  using App1.Data;
  using App1.DataService;
  using System;
  using System.Collections.Generic;
  using System.IO;
  using System.Linq;
  using Windows.Foundation;
  using Windows.Foundation.Collections;
  using Windows.UI.Xaml;
  using Windows.UI.Xaml.Controls;
  using Windows.UI.Xaml.Controls.Primitives;
  using Windows.UI.Xaml.Data;
  using Windows.UI.Xaml.Input;
  using Windows.UI.Xaml.Media;
  using Windows.UI.Xaml.Navigation;
  
  // The Grouped Items Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234231
  
  namespace App1
  {
      /// &lt;summary&gt;
      /// A page that displays a grouped collection of items.
      /// &lt;/summary&gt;
      public sealed partial class GroupedItemsPage1 : App1.Common.LayoutAwarePage
      {
          public GroupedItemsPage1()
          {
              this.InitializeComponent();
          }
  
          /// &lt;summary&gt;
          /// Populates the page with content passed during navigation.  Any saved state is also
          /// provided when recreating a page from a prior session.
          /// &lt;/summary&gt;
          /// &lt;param name="navigationParameter"&gt;The parameter value passed to
          /// &lt;see cref="Frame.Navigate(Type, Object)"/&gt; when this page was initially requested.
          /// &lt;/param&gt;
          /// &lt;param name="pageState"&gt;A dictionary of state preserved by this page during an earlier
          /// session.  This will be null the first time a page is visited.&lt;/param&gt;
          protected override void LoadState(Object navigationParameter, Dictionary&lt;String, Object&gt; pageState)
          {
              // TODO: Create an appropriate data model for your problem domain to replace the sample data
  
                  var sampleDataGroups = DataSource.GetGroups((String)navigationParameter);
                  this.DefaultViewModel["Groups"] = sampleDataGroups;
  
  
                  var tracks = groupedItemsViewSource.View.CollectionGroups;
                  (Zoom.ZoomedOutView as GridView).ItemsSource = tracks;
  
             // GetSectors();
  
  
          }
            /// &lt;summary&gt;
          /// Invoked when an item within a group is clicked.
          /// &lt;/summary&gt;
          /// &lt;param name="sender"&gt;The GridView (or ListView when the application is snapped)
          /// displaying the item clicked.&lt;/param&gt;
          /// &lt;param name="e"&gt;Event data that describes the item clicked.&lt;/param&gt;
  
          /*protected async override void LoadState(Object navigationParameter, Dictionary&lt;String, Object&gt; pageState)
          {
  
              var client = new DataServiceSoapClient();
              var sectors = await client.GetSectorsAsync(1);
              this.DefaultViewModel["sectors"] = sectors;
  
          }*/
  
          void ItemView_ItemClick(object sender, ItemClickEventArgs e)
          {
              // Navigate to the appropriate destination page, configuring the new page
              // by passing required information as a navigation parameter
              var itemId = ((DataItem)e.ClickedItem).UniqueId;
              this.Frame.Navigate(typeof(GroupDetailPage1), itemId);
          }
  
  
          private void Content_Hub_Click(object sender, RoutedEventArgs e)
          {
              Frame.Navigate(typeof(App1.GroupedItemsPage1));
          }
  
          private void MARKET_RESEARCH_Click(object sender, RoutedEventArgs e)
          {
              Frame.Navigate(typeof(App1.SamplePage));
          }
  
          }
  
      }
  </code></pre>