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

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

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

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 pivot page

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

  2. In the XAML code, locate the CONTROLS:PIVOT element, and replace it with the following code. This creates three pivot items, and sets the pivot control and pivot item titles.

    Caution noteCaution:

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

    <!--Pivot Control-->
    <controls:Pivot Title="pivot page">
    
        <!--Pivot item one-->
        <controls:PivotItem Header="piv 1">
        </controls:PivotItem>
    
        <!--Pivot item two-->
        <controls:PivotItem Header="piv 2">
            <StackPanel>
                <TextBlock Text="p2"/>
            </StackPanel>
        </controls:PivotItem>
    
        <!--Pivot item three-->
        <controls:PivotItem Header="piv 3">
            <StackPanel>
                <TextBlock Text="p3"/>
            </StackPanel>
        </controls:PivotItem>
    </controls:Pivot>
    
  3. Locate the sample Application Bar element, which is added to your page by default. It is at the bottom, commented out.

  4. Replace the sample Application Bar element with 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.

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default" 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 pivot 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.

    //Set the initial values for the Application Bar properties by checking the radio buttons.
    ForeNormal.IsChecked = true;
    BackNormal.IsChecked = true; 
    One.IsChecked = true;
    DefaultSize.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 pivot 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 pivot 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 pivot items. Notice that the Application Bar is the same, and maintains the state of the properties, on all of the pivot 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:
© 2016 Microsoft