为您的 XAML Metro 应用程序添加应用程序栏

引言

我们都熟悉 Windows Phone 7 中的应用程序栏……

只需几行代码即可实现，如下所示

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar>
        <shell:ApplicationBarIconButton IconUri="/icons/download.png" IsEnabled="True" />
        <shell:ApplicationBarIconButton IconUri="/icons/settings.png" IsEnabled="True" />
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem x:Name="mnuReturnToHome" 
                 Text="return to home" Click="mnuReturnToHome_Click" />              
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

我们希望对我们的新 XAML Metro 应用程序做同样的事情。 好消息是，它就像在 Windows Phone 7 中一样容易，并且还有一些其他很酷的功能。

让我们开始吧…

打开 Visual Studio 11，选择文件->新建项目。 然后选择 Visual C# –> Windows Metro Style –> 应用程序，并为其命名并点击确定。

一旦 MainPage.xaml 加载完毕，请使用以下代码段替换 Grid

<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
    <ApplicationBar VerticalAlignment="Bottom">
        <StackPanel Orientation="Horizontal">
            <Button Content="Exit" x:Name="btnExit" />
        </StackPanel>
    </ApplicationBar>
</Grid>

现在您应该可以通过简单的 Ctrl+F5 或从“调试”菜单中运行该项目。

但您很快会注意到您所拥有的只是一个黑屏。

注意：添加了黑色截图以供娱乐。

应用程序栏默认是暂时的，这意味着它们开始时是隐藏的，并且仅在响应手势或在本例中是鼠标右键单击时才会出现。 如果您右键单击该应用程序（如果使用模拟器或非平板设备），您将看到应用程序栏出现。

如果您是键盘爱好者，也可以按 CTRL+ALT+A。

我希望我的应用程序栏始终可见！

您可以通过将 IsPersistent 属性设置为 True 来使应用程序栏始终显示。

<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
   <ApplicationBar VerticalAlignment="Bottom" IsPersistant="True">
       <StackPanel Orientation="Horizontal">
           <Button Content="Exit" x:Name="btnExit" />
       </StackPanel>
   </ApplicationBar>
</Grid>

您如何更改应用程序栏的关闭方式？

您可以通过设置 DismissMode 属性来更改应用程序栏的关闭方式。

来自文档

默认值为 EdgeSwipe，这需要边缘滑动手势、右键单击或 CTRL+ALT+A。 LightDismiss 会导致应用程序栏在用户与应用程序的主要部分交互时消失，而 TimeDelay 会导致应用程序栏在指定的延迟后消失。

在下面的示例代码中，您将看到我们设置了两个属性：DismissMode 和 Delay。 （我们将此示例设置为在 5 秒后隐藏应用程序栏。）

<ApplicationBar Background="White" VerticalAlignment="Bottom" 
                DismissMode="TimeDelay" Delay="5000">
   <StackPanel>
         <Button Content="Bottom" Background="Black" />
   </StackPanel>
</ApplicationBar>

我的应用程序栏是否仅限于底部？

不，您可以将 VerticalAlignment 更改为以下任何值。 我觉得唯一有益的是 Top 或 Bottom。

正如您所看到的，存在多个选项。

我能否同时拥有顶部应用程序栏和底部应用程序栏？

当然，只需添加类似于以下的代码

<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
    <!--Top App Bar-->
    <ApplicationBar Background="White" VerticalAlignment="Top" 
              DismissMode="TimeDelay" Delay="5000">
        <StackPanel>
            <Button Content="Top" Background="Black" />
        </StackPanel>
    </ApplicationBar>
 
    <!--Bottom App Bar-->
    <ApplicationBar Background="White" VerticalAlignment="Bottom" 
            DismissMode="TimeDelay" Delay="5000">
    <StackPanel>
          <Button Content="Bottom" Background="Black" />
    </StackPanel>
    </ApplicationBar>
</Grid>

将图像添加到我的按钮怎么样？

我以以下方式做到了

<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
    <ApplicationBar VerticalAlignment="Bottom" DismissMode="TimeDelay" >
        <StackPanel Orientation="Horizontal">
            <Button Content="Exit" x:Name="btnExit" />
            <Button >
                <Button.Content>
                    <Image Height="20" Width="20" 
                       Source="c:\users\mbcrump\documents\visual studio 11\
                         Projects\ApplicationBarSample\
                         ApplicationBarSample\Images\SmallLogo.png"/>
                </Button.Content>
            </Button>
        </StackPanel>
    </ApplicationBar>
</Grid>

我确信可能还有其他更优雅的方法，但我只是使用我现有的 XAML 知识和项目模板提供的图像来做到这一点。 我想看看“使用您现有的技能”有多少是真实的。

结论

使用 XAML Metro 应用程序中的新应用程序栏很容易上手。 我正在投入大量空闲时间学习如何使用 XAML/C# 开发 Metro 应用程序。 如果您对更多此类文章感兴趣，请浏览我博客上的最后几篇文章。 此外，不要忘记回来阅读更多关于各种 XAML 技术的文章。