How to create an app bar using XAML for Windows Phone

  • Article

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

You can create an Application Bar by using XAML that provides users with quick access to an application’s most common tasks. To decide whether you should create your Application Bar in XAML or in code, see App bar for Windows Phone.

The following illustration shows an example of an Application Bar, after the user has expanded it.

This topic contains the following sections.

Creating an application bar by using XAML

The page templates that ship with the Windows Phone SDK contain the XAML for a sample Application Bar commented out. Uncomment the XAML to create an Application Bar. This procedure assumes that you have a Windows Phone application that has a page. Before you can use images for icon buttons on the Application Bar, you must first add them to your application. For more information, see App bar icon buttons for Windows Phone.

To create an application bar by using XAML

  1. Open your page in the designer to view the XAML.

  2. Locate the sample Application Bar element, which is added to your page by default. It looks like the following.

    <!--Sample code showing usage of ApplicationBar-->
<!--<phone:PhoneApplicationPage.ApplicationBar>
    …
</phone:PhoneApplicationPage.ApplicationBar>-->

    If your page is a panorama page, you do not have a sample Application Bar. Add your Application Bar before the last line of XAML. It looks like the following.

    </phone:PhoneApplicationPage>

Note

Application Bar has a new mini-mode specifically designed to take up less space on panorama pages. For more information, see App bar for Windows Phone.

  1. Uncomment or add the following XAML.

    <phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

  2. Set the Application Bar properties as needed. For more information about the properties, see App bar for Windows Phone.

  3. Remove or add more icon buttons as needed. Set the icon images and button text.

  4. The menu items are optional. Remove them or add new ones as needed. Set the text.

  5. The following is an example of an Application Bar with two icon buttons and two menu items. You add click events and handlers in the next procedure.

    <phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">

        <shell:ApplicationBarIconButton IconUri="/Images/save.png" Text="save"/>
        <shell:ApplicationBarIconButton IconUri="/Images/settings.png" Text="settings"/>

        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="menu item 1" />
            <shell:ApplicationBarMenuItem Text="menu item 2" />
        </shell:ApplicationBar.MenuItems>

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

Handling the click events

The icon buttons and menu items expose click events that you can handle in your code.

To handle the click events

  1. Open your page in the designer to view the XAML.

  2. For each icon button and menu item, identify the event to call when the user clicks. The following is an example of the Application Bar from the previous procedure with the click events identified.

    <phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">

        <shell:ApplicationBarIconButton Click="Save_Click" IconUri="/Images/save.png" Text="save" />
        <shell:ApplicationBarIconButton Click="Settings_Click" IconUri="/Images/settings.png" Text="settings" />

        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Click="MenuItem1_Click" Text="menu item 1" />
            <shell:ApplicationBarMenuItem Click="MenuItem2_Click" Text="menu item 2" />
        </shell:ApplicationBar.MenuItems>

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

  3. Open the code-behind file for your page in the editor.

  4. For each icon button and menu item, add the event to call when the user clicks. Add the code inside the page class. The following is an example of the click events for the Application Bar from the previous procedure.

    private void Save_Click(object sender, EventArgs e)
{
    MessageBox.Show("Save button works!");
    //Do work for your application here.
}

private void Settings_Click(object sender, EventArgs e)
{
    MessageBox.Show("Settings button works!");
    //Do work for your application here.
}

private void MenuItem1_Click(object sender, EventArgs e)
{
    MessageBox.Show("Menu item 1 works!");
    //Do work for your application here.
}

private void MenuItem2_Click(object sender, EventArgs e)
{
    MessageBox.Show("Menu item 2 works!");
    //Do work for your application here.
}

    Private Sub Save_Click(ByVal sender As Object, ByVal e As EventArgs)

    MessageBox.Show("Save button works!")
    'Do work for your application here.
End Sub


Private Sub Settings_Click(ByVal sender As Object, ByVal e As EventArgs)

    MessageBox.Show("Settings button works!")
    'Do work for your application here.
End Sub


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

    MessageBox.Show("Menu item 1 works!")
    'Do work for your application here.  
End Sub


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

    MessageBox.Show("Menu item 2 works!")
    'Do work for your application here.    
End Sub

See Also

Reference

ApplicationBar

ApplicationBarIconButton

ApplicationBarMenuItem

Other Resources

How to create an app bar using code for Windows Phone

Walkthrough: Creating an app bar test app for Windows Phone

Code Samples for Windows Phone