adding a progress bar when navigating from page to

Question

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?

//XAML PAGE

    <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">

    <Page.BottomAppBar>
        <AppBar>
            <Grid>
                <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"/>
                <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"/>
                <Button x:Name="LEAD_CONVERSION"  Height="64" Margin="400,10,0,10" Width="145" Content="LEAD CONVERSION" FontSize="12" FontFamily="Segui"/>
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                    <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Help"/>
                    <StackPanel.ChildrenTransitions>
                        <TransitionCollection>
                            <AddDeleteThemeTransition/>
                        </TransitionCollection>
                    </StackPanel.ChildrenTransitions>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <Page.Resources>

        <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
        <CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="TopItems"
            d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:DataSource, IsDesignTimeCreatable=True}}"/>

    </Page.Resources>

    <!--
        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 -->

   <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=Pageroot}" Style="{StaticResource BackButtonStyle}" Margin="36,0,0,36" Grid.Row="0"/>
            <StackPanel x:Name="Header" Grid.Row="0" Grid.Column="1" >
                <StackPanel Orientation="Horizontal">
                    <Image HorizontalAlignment="Left" Height="Auto" Margin="35,30,0,0" VerticalAlignment="Top" Width="202" Source="Assets/ACE-Logo.png"></Image>
                </StackPanel>
            </StackPanel>
        </Grid>
        <ProgressRing x:Name="progressBar" VerticalAlignment="Top" />
        <!-- Horizontal scrolling grid used in most view states -->
       <SemanticZoom Name="Zoom" Grid.Row="1">
           <SemanticZoom.ZoomedInView>
       <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">

                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Grid Margin="1,0,0,6">
                                        <Button
                                    AutomationProperties.Name="Group Title"
                                    Content="{Binding Title}"
                                    Style="{StaticResource TextButtonStyle}" 
                                    />
                                    </Grid>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>
             </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView x:Name="ZoomedOutGV"  VerticalAlignment="Center">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel> 
                                <TextBlock Text="{Binding Group.Title}" Width="200" Height="200" Foreground="Blue"/>
                            </StackPanel>
                         </DataTemplate>
                    </GridView.ItemTemplate>
                  <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            </StackPanel>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
            </GridView>
            </SemanticZoom.ZoomedOutView>
       </SemanticZoom>


       <!--   Vertical scrolling list only used when snapped -->
         <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">

            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="7,7,0,0">
                                 <Button
                                    AutomationProperties.Name="Group Title"
                                    Content="{Binding Title}"

                                    Style="{StaticResource TextButtonStyle}"/>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,0,10,56"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    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
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>-->

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>

//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
{
    /// <summary>
    /// A page that displays a grouped collection of items.
    /// </summary>
    public sealed partial class GroupedItemsPage1 : App1.Common.LayoutAwarePage
    {
        public GroupedItemsPage1()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// Populates the page with content passed during navigation.  Any saved state is also
        /// provided when recreating a page from a prior session.
        /// </summary>
        /// <param name="navigationParameter">The parameter value passed to
        /// <see cref="Frame.Navigate(Type, Object)"/> when this page was initially requested.
        /// </param>
        /// <param name="pageState">A dictionary of state preserved by this page during an earlier
        /// session.  This will be null the first time a page is visited.</param>
        protected override void LoadState(Object navigationParameter, Dictionary<String, Object> 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();


        }
          /// <summary>
        /// Invoked when an item within a group is clicked.
        /// </summary>
        /// <param name="sender">The GridView (or ListView when the application is snapped)
        /// displaying the item clicked.</param>
        /// <param name="e">Event data that describes the item clicked.</param>

        /*protected async override void LoadState(Object navigationParameter, Dictionary<String, Object> 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));
        }

        }

    }

Answer 1

Your problem is that you fetch your data in either the page constructor, the OnNavigatedTo-event or the Loaded-event. All block displaying the page. So you have to find another solution. I see two there:

1.Load your data later. Defer the loading, and you can display the page with a progressring or similar

 <ProgressRing x:Name="PrgRing" IsActive="True" Visibility="Collapsed"/>

and in your OnNavigatedTo-handler

PrgRing.Visibility = Visibility.Visible;

then load your data, and when you're finished, display it and set

PrgRing.Visibility = Visibility.Collapsed;

2.Use a page in-between, which loads your data and displays a progressring.

XAML:

<ProgressRing x:Name="PrgRing" IsActive="True" Visibility="Collapsed"/>

C#

//load the data and then
this.rootFrame.Navigate(typeof(TargetPage));

Answer 2

if you are loading the data async than add this to your function

private async void LoadDataAsync()
{
//progressbar start
progressBar.IsIndeterminate = true;

//Some async calls

//other stuff

//stop progressbar
progressBar.IsIndeterminate = false;
}

Answer 3

In LoadState load your data asynchronous. Set ProgressBar (or ProgressRing) visibility to Visible and hide main content grid, after you get data show content grid and hide progressbar.

protected async override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
  ProggressBarVisible(true);
  try
  {
    MainContentGrid.Visibility = Visibility.Collapsed;       
    this.DataContext = await MyDataSource.GetData(navigationParameter);
  }
  finally
  {
    ProggressBarVisible(false);
    MainContentGrid.Visibility = Visibility.Visible;
  }
}


private void ProggressBarVisible(bool visible)
{
  ProgressRingLoad.Visibility = visible ? Visibility.Visible : Visibility.Collapsed;
  ProgressRingLoad.IsActive = visible;
}

And XAML for empty page should look something like this :

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="WindowsStorePlayground.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStorePlayground"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="MainContentGrid">
      <!-- page content goes here -->
    </Grid>

    <ProgressRing x:Name="ProgressRingLoad" Visibility="Collapsed"></ProgressRing>

  </Grid>
</common:LayoutAwarePage>

btw. to get LoadState you should use LayoutAwarePage