Walkthrough: Creating an app bar on a panorama page for Windows Phone

Article
05/20/2016

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

In this walkthrough, you continue to build the application that you started in the topic Walkthrough: Creating an app bar test app for Windows Phone.

This topic contains the following sections.

Creating an Application Bar on a Panorama Page
Checkpoint 4
Related Topics

Prerequisites

To complete this walkthrough, you must have completed the procedures in the topic Walkthrough: Creating an app bar test app for Windows Phone.

Creating an Application Bar on a Panorama Page

To create an Application Bar on a panorama page

In Solution Explorer, double-click PanoramaPage.xaml to open it in the designer.
In the XAML code, locate the controls:Panorama element, and replace it with the following code. This creates three panorama items, and sets the application and panorama item titles.

Warning

Be careful not to delete the end tag of the LayoutRoot GRID element that immediately follows the controls:Panorama element.

    <controls:Panorama x:Name="PanoControl" Title="panorama" >
    
        <!--Panorama item one-->
        <controls:PanoramaItem Header="pano1">
        </controls:PanoramaItem>
    
        <!--Panorama item two-->
        <controls:PanoramaItem Header="pano2">
            <StackPanel>
                <TextBlock Text="p2"/>
            </StackPanel>
        </controls:PanoramaItem>
    
        <!--Panorama item three-->
        <controls:PanoramaItem Header="pano3">
            <StackPanel>
                <TextBlock Text="p3"/>
            </StackPanel>
        </controls:PanoramaItem>
    </controls:Panorama>

Locate the last line of the page. You might see a warning that panorama pages should not contain an Application Bar; however, that is no longer true. The new Application Bar mini size is designed for use on panorama pages.

Before the last line of the page (the end </phone:PhoneApplicationPage> tag), add the following code. This code creates the Application Bar. The code creates four buttons and uses the images that you added previously as the icons. It also creates two menu items. Since this is a panorama page, the size mode property is set to minimized, which hides the icon buttons and displays only an ellipsis.

<!--Panorama-based applications should not show an ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized" Opacity="1.0" >

        <shell:ApplicationBarIconButton IconUri="/Images/save.png" Text="save" Click="Button1_Click" />
        <shell:ApplicationBarIconButton IconUri="/Images/delete.png" Text="delete" Click="Button2_Click" />
        <shell:ApplicationBarIconButton IconUri="/Images/help.png" Text="help" Click="Button3_Click" />
        <shell:ApplicationBarIconButton IconUri="/Images/settings.png" Text="settings" Click="Button4_Click" />

        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="get default size value" Click="MenuItem1_Click" />
            <shell:ApplicationBarMenuItem Text="get mini size value" Click="MenuItem2_Click" />
        </shell:ApplicationBar.MenuItems>

    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Inside the first panorama item only, add the following code. This code creates the user interface for the application. It contains radio buttons for each of the Application Bar properties. As you click the radio buttons, the changes are made to the Application Bar dynamically, enabling you to test the different properties and their interactions with each other.

<ScrollViewer x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel>

        <TextBlock Text="foreground color" Foreground="{StaticResource PhoneAccentBrush}" />
        <StackPanel Orientation="Horizontal">
            <RadioButton Checked="ForeColorChanged" Name="ForeNormal" Content="normal" />
            <RadioButton Checked="ForeColorChanged" Name="ForeAccent" Content="accent" />
        </StackPanel>

        <TextBlock Text="background color" Foreground="{StaticResource PhoneAccentBrush}" />
        <StackPanel Orientation="Horizontal">
            <RadioButton Checked="BackColorChanged" Name="BackNormal" Content="normal" />
            <RadioButton Checked="BackColorChanged" Name="BackAccent" Content="accent" />
        </StackPanel>

        <TextBlock Text="opacity" Foreground="{StaticResource PhoneAccentBrush}" />
        <StackPanel Orientation="Horizontal">
            <RadioButton Checked="OpacityChanged" Name="One" Content="1.0" />
            <RadioButton Checked="OpacityChanged" Name="Half" Content="0.5" />
            <RadioButton Checked="OpacityChanged" Name="Zero" Content="0.0" />
        </StackPanel>

        <TextBlock Text="size mode (NEW PROPERTY!)" Foreground="{StaticResource PhoneAccentBrush}" />
        <StackPanel Orientation="Horizontal">
            <RadioButton Checked="ModeChanged" Name="DefaultSize" Content="default" />
            <RadioButton Checked="ModeChanged" Name="Mini" Content="mini" />
        </StackPanel>

        <TextBlock Text="menu items" Foreground="{StaticResource PhoneAccentBrush}" />
        <StackPanel Orientation="Horizontal">
            <RadioButton Checked="MenuEnabledChanged" Name="Enabled" Content="enabled" />
            <RadioButton Checked="MenuEnabledChanged" Name="Disabled" Content="disabled" />
        </StackPanel>

        <TextBlock Text="visibility" Foreground="{StaticResource PhoneAccentBrush}" />
        <StackPanel Orientation="Horizontal">
            <RadioButton Checked="VisibilityChanged" Name="Visible" Content="visible" />
            <RadioButton Checked="VisibilityChanged" Name="Hidden" Content="hidden" />
        </StackPanel>
    </StackPanel>
</ScrollViewer>

Open the code-behind file for your page. At the top, add the following statement.
```
using Microsoft.Phone.Shell;
```
```
Imports Microsoft.Phone.Shell
```

In the page constructor, after the call to InitializeComponent, add the following code. This code sets the initial values for the Application Bar properties. Since this is a panorama page, the size mode property is set to minimized, which hides the icon buttons and displays only an ellipsis.

//Set the initial values for the Application Bar properties by checking the radio buttons.
ForeNormal.IsChecked = true;
BackNormal.IsChecked = true;
One.IsChecked = true;
Mini.IsChecked = true;
Visible.IsChecked = true;
Enabled.IsChecked = true;

'Set the initial values for the Application Bar properties by checking the radio buttons.
ForeNormal.IsChecked = true
BackNormal.IsChecked = true
One.IsChecked = true
Mini.IsChecked = true
Visible.IsChecked = true
Enabled.IsChecked = true

After the page constructor, add the following code. These are the radio button click event handlers. When you click the radio buttons, this code changes the properties of the Application Bar dynamically.

private void ForeColorChanged(object sender, RoutedEventArgs e)
{
    String option = ((RadioButton)sender).Name;
    switch (option)
    {
        case "ForeNormal":
            ApplicationBar.ForegroundColor = (Color)Resources["PhoneForegroundColor"];
            break;

        case "ForeAccent":
            ApplicationBar.ForegroundColor = (Color)Resources["PhoneAccentColor"];
            break;
    }
}

private void BackColorChanged(object sender, RoutedEventArgs e)
{
    String option = ((RadioButton)sender).Name;
    switch (option)
    {
        case "BackNormal":
            ApplicationBar.BackgroundColor = new Color() {A=0, R=0, G=0, B=0};
            break;

        case "BackAccent":
            ApplicationBar.BackgroundColor= (Color)Resources["PhoneAccentColor"];
            break;
    }
}

private void OpacityChanged(object sender, RoutedEventArgs e)
{
    String option = ((RadioButton)sender).Name;
    switch (option)
    {
        case "One":
            ApplicationBar.Opacity = 1.0;
            break;

        case "Half":
            ApplicationBar.Opacity = 0.5;
            break;

        case "Zero":
            ApplicationBar.Opacity = 0.0;
            break;
    }
}

private void ModeChanged(object sender, RoutedEventArgs e)
{
    String option = ((RadioButton)sender).Name;
    switch (option)
    {
        case "DefaultSize":
            ApplicationBar.Mode = ApplicationBarMode.Default;
            break;

        case "Mini":
            ApplicationBar.Mode = ApplicationBarMode.Minimized;
            break;
    }
}

private void VisibilityChanged(object sender, RoutedEventArgs e)
{
    String option = ((RadioButton)sender).Name;
    switch (option)
    {
        case "Visible":
            ApplicationBar.IsVisible = true;
            break;

        case "Hidden":
            ApplicationBar.IsVisible = false;
            break;
    }
}

private void MenuEnabledChanged(object sender, RoutedEventArgs e)
{
    String option = ((RadioButton)sender).Name;
    switch (option)
    {
        case "Enabled":
            ApplicationBar.IsMenuEnabled = true;
            break;

        case "Disabled":
            ApplicationBar.IsMenuEnabled = false;
            break;
    }
}

Private Sub ForeColorChanged(sender As Object, e As RoutedEventArgs)

    Dim myOption As String = (CType(sender, RadioButton)).Name
    Select Case myOption

        Case "ForeNormal"
            ApplicationBar.ForegroundColor = CType(Resources("PhoneForegroundColor"), Color)

        Case "ForeAccent"
            ApplicationBar.ForegroundColor = CType(Resources("PhoneAccentColor"), Color)
    End Select
End Sub


Private Sub BackColorChanged(sender As Object, e As RoutedEventArgs)

    Dim myOption As String = (CType(sender, RadioButton)).Name
    Select Case myOption

        Case "BackNormal"
            ApplicationBar.BackgroundColor = New Color() With {.A=0, .R=0, .G=0, .B=0}

        Case "BackAccent"
            ApplicationBar.BackgroundColor = CType(Resources("PhoneAccentColor"), Color)
    End Select
End Sub


Private Sub OpacityChanged(sender As Object, e As RoutedEventArgs)

    Dim myOption As String = (CType(sender, RadioButton)).Name
    Select Case myOption

        Case "One"
            ApplicationBar.Opacity = 1.0

        Case "Half"
            ApplicationBar.Opacity = 0.5

        Case "Zero"
            ApplicationBar.Opacity = 0.0
    End Select
End Sub


Private Sub ModeChanged(sender As Object, e As RoutedEventArgs)

    Dim myOption As String = (CType(sender, RadioButton)).Name
    Select Case myOption

        Case "DefaultSize"
            ApplicationBar.Mode = ApplicationBarMode.Default

        Case "Mini"
            ApplicationBar.Mode = ApplicationBarMode.Minimized
    End Select
End Sub


Private Sub VisibilityChanged(sender As Object, e As RoutedEventArgs)

    Dim myOption As String = (CType(sender, RadioButton)).Name
    Select Case myOption

        Case "Visible"
            ApplicationBar.IsVisible = True

        Case "Hidden"
            ApplicationBar.IsVisible = False
    End Select
End Sub


Private Sub MenuEnabledChanged(sender As Object, e As RoutedEventArgs)

    Dim myOption As String = (CType(sender, RadioButton)).Name
    Select Case myOption

        Case "Enabled"
            ApplicationBar.IsMenuEnabled = True

        Case "Disabled"
            ApplicationBar.IsMenuEnabled = False
    End Select
End Sub

Add the following code to the page. These are the click event handlers for the Application Bar buttons and menu items. In this test application, the buttons and menu items display message boxes. In your real application, the buttons and menu items will do useful work.

private void Button1_Click(object sender, EventArgs e)
{
    MessageBox.Show("Button 1 works!  Do something useful in your application.");
}

private void Button2_Click(object sender, EventArgs e)
{
    MessageBox.Show("Button 2 works!  Do something useful in your application.");
}

private void Button3_Click(object sender, EventArgs e)
{
    MessageBox.Show("Button 3 works!  Do something useful in your application.");
}

private void Button4_Click(object sender, EventArgs e)
{
    MessageBox.Show("Button 4 works!  Do something useful in your application.");
}

private void MenuItem1_Click(object sender, EventArgs e)
{
    MessageBox.Show("The default Application Bar size is " + ApplicationBar.DefaultSize + " pixels.");
}

private void MenuItem2_Click(object sender, EventArgs e)
{
    MessageBox.Show("The mini Application Bar size is " + ApplicationBar.MiniSize + " pixels.");
}

Private Sub Button1_Click(sender As Object, e As EventArgs)

    MessageBox.Show("Button 1 works!  Do something useful in your application.")
End Sub

Private Sub Button2_Click(sender As Object, e As EventArgs)

    MessageBox.Show("Button 2 works!  Do something useful in your application.")
End Sub

Private Sub Button3_Click(sender As Object, e As EventArgs)

    MessageBox.Show("Button 3 works!  Do something useful in your application.")
End Sub

Private Sub Button4_Click(sender As Object, e As EventArgs)

    MessageBox.Show("Button 4 works!  Do something useful in your application.")
End Sub

Private Sub MenuItem1_Click(sender As Object, e As EventArgs)

    MessageBox.Show("The default Application Bar size is " + ApplicationBar.DefaultSize.ToString() + " pixels.")
End Sub

Private Sub MenuItem2_Click(sender As Object, e As EventArgs)

    MessageBox.Show("The mini Application Bar size is " + ApplicationBar.MiniSize.ToString() + " pixels.")
End Sub

Checkpoint 4

In this procedure, you run the application to test the Application Bar on a panorama page.

To test the application

Start your application in the emulator. If necessary, use the instructions from the first checkpoint.

The application starts in the emulator, and the main page appears.
Click the link a panorama page to navigate to the page you just created.
Experiment with the different properties by clicking the radio buttons. Some properties are easier to test together. For example, it is easier to test the opacity property with the background property set to accent.
Swipe to the other panorama items. Notice that the Application Bar is the same, and maintains the state of the properties, on all of the panorama items.
Test the icon buttons by clicking each one and confirming that the message box appears.
Test the menu items by clicking each one and confirming that the message box appears.
On the Debug menu, click Stop Debugging. (F5)

Next Steps

To continue building this application, complete the procedures in one or more of the following optional topics. You do not need to complete the procedures in order.

You can expand the functionality of the application in the following ways.

Add a background image to the panorama page. For more information, see How to create a panorama app for Windows Phone 8. For extra credit, add two images to the project and change the background image dynamically depending on whether the user has selected the dark or light theme. For more information, see How to apply theme resources for Windows Phone. To see an example of this technique, download the Application Bar Sample.
Factor the Application Bar code into an application-wide resource and reuse it on the page. For more information, see How to reuse an app bar on multiple pages for Windows Phone.

Share via