MSDN Library
信息
您所需的主题如下所示。但此主题未包含在此库中。

如何使用 XAML 为 Windows Phone 创建应用栏

2014/6/18

适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

您可以使用 XAML 创建一个应用程序栏,以便为用户提供对应用程序常见任务的快速访问。若要决定应该采用 XAML 还是采用代码创建应用程序栏,请参见 Windows Phone 的应用栏

下图显示了应用程序栏由用户展开后的示例。

App Bar expanded with menu items

本主题包括以下部分。

Windows Phone SDK 附带的页面模板包含被注释掉的示例应用程序栏的 XAML。取消 XAML 的注释以创建应用程序栏。该过程假定您拥有包含一个页面的 Windows Phone 应用程序。在对应用程序栏上的图标按钮使用图像之前,必须首先将这些按钮添加到您的应用程序。有关更多信息,请参见 Windows Phone 的应用栏图标按钮

使用 XAML 创建应用程序栏的步骤

  1. 在设计器中打开您的页面以查看 XAML。

  2. 找到默认情况下添加到您的页面的示例应用程序栏元素。它类似于以下内容。

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

    如果您的页面是一个全景页面,则没有示例应用程序栏。在 XAML 的最后一行之前添加您的应用程序栏。它类似于以下内容。

    </phone:PhoneApplicationPage>
    
    说明注意:

    应用程序栏有一个新的最小模式,专门设计为在全景页面上占用少量空间。有关更多信息,请参见 Windows Phone 的应用栏

  3. 取消注释或添加以下 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. 根据需要设置应用程序栏属性。有关属性的更多信息,请参见 Windows Phone 的应用栏

  5. 根据需要删除或添加多个图标按钮。设置图标图像和按钮文本。

  6. 菜单项是可选的。根据需要删除或添加新的菜单项。设置文本。

  7. 下面是具有两个图标按钮和两个菜单项的应用程序栏示例。在下面的过程中将添加单击事件和处理程序。

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

图标按钮和菜单项公开您可以采用代码处理的单击事件。

处理单击事件的步骤

  1. 在设计器中打开您的页面以查看 XAML。

  2. 对于每个图标按钮和菜单项,确定用户单击时要调用的事件。下面是来自上一过程的应用程序栏的示例,其中标识了单击事件。

    <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. 在编辑器中打开您页面的代码隐藏文件。

  4. 对于每个图标按钮和菜单项,添加用户单击时要调用的事件。在页面类中添加代码。下面是来自上一过程的应用程序栏的单击事件示例。

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

显示:
© 2016 Microsoft