在Blend for Visual Studio 2012的Design模式下显示HTML Metro应用程序的AppBar

mbcrump

5.00/5 (2投票s)

2012年8月1日

CPOL

1分钟阅读

17148

在 Visual Studio 2012 的 Blend 设计模式下显示 HTML Metro 应用的 AppBar。

引言

在 XAML Metro 应用中显示 AppBar 不需要任何特殊的技巧，只需将代码放置在页面上，然后在 Blend 中打开即可看到 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>
</Page>

正如你所见，它直接就能工作。

另一方面，HTML Metro 应用并没有这种便利，你需要手动启用它。打开 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。你需要从 Live DOM 手动导航到你的 AppBar，然后右键单击并选择“激活 AppBar”。

现在它将在设计视图中显示。

需要注意的是，如果你从 Visual Studio 的 Blend 中拖放 AppBar，它会自动打开该选项。

总结

感谢阅读！你可以在这里下载 Windows 8 Release Preview 和 VS2012 RC（如果你还没有下载的话）。我还建议你查看 Telerik 的 RadControls for Metro，它提供了一些很棒的 Windows 8 组件。如果你有任何问题或评论，请在下方留言。