How can I show a small frame at the bottom of every page with WP8.1?

Question

I would like to have a small frame at the bottom of the screen just above the command bar, or in alternative at the top of the screen, no matter which screen I'm displaying.

The idea is to have a small space where I can show the progress of some operation the user started or whether the connection is lost, etc.

The user can in fact navigate through multiple screens and select some content to download or to upload and I would like to always display the progress instead of disturbing with dialogs that blocks the navigation through the pages.

What I would like to avoid is to write some code for every single page.

Any suggestion?

Answer 1

One way to implement this is to use a master page concept, where the master page contains the elements you want to display all the time and a Frame to host each individual page.

Create a new page called MasterPage, the XAML will look something like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Frame x:Name="contentFrame" Grid.Row="0"/>

    <TextBlock Text="TextBlock that is displayed all the time" Grid.Row="1"/>
</Grid>

Expose the Frame as a property in the code behind:

public Frame ContentFrame
{
    get
    {
        return this.contentFrame;
    }
}

In the app's OnLaunched() method, create an instance of MasterPage instead of Frame and make it the Window's content:

var rootMasterPage = Window.Current.Content as MasterPage; // MasterPage instead of a Frame

if (rootMasterPage == null)
{
    rootMasterPage = new MasterPage(); // MasterPage instead of a Frame
    Window.Current.Content = rootMasterPage 
}

Then, navigate to the app's first page using the master page's internal Frame

if (rootMasterPage.ContentFrame.Content == null)
{
    rootMasterPage.ContentFrame.Navigate(typeof(MainPage));
}

Whenever you need to navigate to a different page:

(Window.Current.Content as MasterPage).ContentFrame.Navigate(typeof(SecondPage));