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.

• Creating an Application Bar on a Pivot Page
• Checkpoint 3
• 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 Pivot Page

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.

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

   Imports 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;
   

   '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;
       }
   }
   

   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
   

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.");
   }
   

   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 3

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)

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.

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

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

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

• Change the pivot page so that each pivot page contains a different Application Bar. For more information, see How to use different app bars in a single Pivot control for Windows Phone.

See Also

Other Resources

App bar for Windows Phone