Walkthrough: Creating an app bar on a plain 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 Plain Page
Checkpoint 2
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 Plain Page

To create an Application Bar on a plain page

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

In the XAML code, locate the STACKPANEL element named TitlePanel. Replace it with the following code. This sets the application and page titles.

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="App Bar Tester" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="plain page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

Locate the sample Application Bar element, which is added to your page by default. It is at the bottom, commented out.

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>

Locate the GRID element named ContentPanel and replace it with the following code.

Warning

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

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.

//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

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 2

In this procedure, you run the application to test the Application Bar on a plain 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 plain 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.
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.

Factor the Application Bar code into an application-wide resource and use it on the page. For more information, see How to reuse an app bar on multiple pages for Windows Phone.

Share via