EN
Dieser Inhalt ist in Ihrer Sprache leider nicht verfügbar. Im Folgenden finden Sie die englische Version.

How to create an app bar using XAML for Windows Phone

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

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.

App Bar expanded with menu items

This topic contains the following sections.

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>
    
    NoteNote:

    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.

  3. 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>
    
  4. Set the Application Bar properties as needed. For more information about the properties, see App bar for Windows Phone.

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

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

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

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

Anzeigen:
© 2014 Microsoft