Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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

May 10, 2014

Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

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.

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

To create an Application Bar on a panorama page

  1. In Solution Explorer, double-click PanoramaPage.xaml to open it in the designer.

  2. 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.

    Caution noteCaution:

    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>
    
  3. 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.

  4. 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>
    
  5. 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>
    
    
  6. Open the code-behind file for your page. At the top, add the following statement.

    using Microsoft.Phone.Shell;
    
  7. 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;
    
  8. 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;
        }
    }
    
  9. 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.");
    }
    

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

To test the application

  1. 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.

  2. Click the link a panorama page to navigate to the page you just created.

  3. 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.

  4. 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.

  5. Test the icon buttons by clicking each one and confirming that the message box appears.

  6. Test the menu items by clicking each one and confirming that the message box appears.

  7. On the Debug menu, click Stop Debugging. (F5)

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.

Show:
© 2014 Microsoft