在WinJS Metro应用开发中，实现AppBar的显示和操作是一个常见的需求。本文将通过详细的步骤和代码示例，指导如何在Visual Studio 2012中创建并使用AppBar。
首先，需要在页面中添加AppBar的XML布局。以下是添加AppBar的代码示例：
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
</Grid>
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click" />
<Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click" />
<Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click" />
<Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click" />
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
如所见，将上述代码放置在页面中后，AppBar就可以正常工作了。
然而，在HTML Metro应用中，并没有这样的便利，需要手动启用AppBar。以下是在Visual Studio 2012中创建一个新的JavaScript Metro应用并替换default.html中的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App7</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- App7 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>Content goes here</p>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"></button>
</div>
</body>
</html>
注意指定AppBar的div元素。接下来，右键点击default.html并在Blend中打开。一旦启动，在设计视图中不会看到AppBar。必须手动导航到AppBar从实时DOM，然后右键点击并选择“激活AppBar”。
现在，AppBar将在设计视图中显示。