Windows 8.1 AppBar 省略号答案

【问题标题】：Windows 8.1 AppBar EllipsisWindows 8.1 AppBar 省略号
【发布时间】：2013-09-09 13:10:08
【问题描述】：

在 Windows 8.1 RTM 应用（如日历）中带有带省略号的 AppBar。

我正在尝试复制该功能，但找不到任何有关将此类功能添加到 Windows 8.1 中的 AppBar 控件的详细信息。

一位朋友建议在一个StackPanel 中创建一个Grid 和三个Circles，放在点击时打开AppBar 的页面底部。

有没有更好的方法在 Windows 8.1 的日历应用中实现 AppBar 样式？

额外问题：日历应用程序，如果我没记错的话，新闻应用程序有一个令人惊叹的导航 AppBar，它从顶部下拉。我如何创建它？

【问题讨论】：

标签： windows-8 windows-runtime windows-store-apps winrt-xaml windows-8.1

【解决方案1】：

这已在 MSDN 论坛中的 x-post 上得到回答。

省略号是这些应用程序中的自定义内容，目前不是 AppBar 的一般属性。此外，Bing 应用程序中的导航元素是 WinJS NavBar 控件...目前未实现为 XAML 控件。

【讨论】：

非常感谢。希望 NavBar 很快就会出现在 XAML 中：/
看起来一点也不难实现——它没有附在应用栏上，它本质上是一个打开应用栏的按钮。
事实上，省略号可以作为 Segoe UI Symbol 字体中的字形使用 - &#xEC02;

【解决方案2】：

Jeremy Alles 提供了一个示例，说明如何使用边框中的按钮进行模拟：

http://www.japf.fr/2013/10/winrt-introducing-the-appbarhint-control/

为了使其正常工作，我必须进行的一项更改是您在页面上引用控件的位置。而不是：

<controls:AppBarHint Grid.Row="1" />

你需要使用

<controls:AppBarHint Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />

为了更整洁，更改主网格，以便有第三行：

<Grid.RowDefinitions>
    <RowDefinition Height="140"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="15"/>
</Grid.RowDefinitions>

并将行引用更改为Grid.Row="2"。这样做的原因是它确保应用栏提示不会遮挡第 1 行中的任何其他内容，例如水平滚动条。

最后，邮件应用提供了一个工具提示，您可以将其添加到控件的 XAML 中：

ToolTipService.ToolTip="Show more commands (Windows logo key+Z, or right-click)"

【讨论】：

【解决方案3】：

看起来省略号是内置在 WinJS AppBar 控件中的。从 GitHub (https://github.com/winjs/winjs/) 获取最新的 WinJS 位后，您可以使用新的 AppBar closedDisplayMode 属性来获取省略号：

<div data-win-control="WinJS.UI.AppBar" data-win options="{closedDisplayMode:'minimal'}">
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add'}"></button>
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove'}"></button>
</div>

您可以在这里找到演示：http://try.buildwinjs.com/#appbar

【讨论】：