Windows 10 UAP：绑定命令栏答案

【问题标题】：Windows 10 UAP : Binding a Command barWindows 10 UAP：绑定命令栏
【发布时间】：2016-02-05 00:20:01
【问题描述】：

我正在制作 UAP Windows 10 应用程序。与 Microsoft 的应用新闻一样，我正在尝试将 CommandBar 放在桌面视图中的页面顶部，以及移动视图中的页面底部。

我怎么能这样做？我想我有一个独立的<CommandBar xxx> 和空的<Page.TopAppBar> 和<Page.BottomAppBar>。根据视图的大小，我将 CommandBar 附加到 TopAppBar 或 BottomAppBar...？

有想法？谢谢你。

【问题讨论】：

也许尝试在每个中创建一个CommandBar 并根据屏幕高度切换可见性？我相当肯定您可以使用自适应 UI 在 XAML 中实现这一点。见here
如果我使用两个 CommandBar 并根据屏幕大小切换可见性，我需要将相同的项目添加到两个 CommandBar。有没有办法在代码隐藏中添加这些项目一次并绑定两个CommandBar，比如<CommandBar Content="{Binding xxx}"/>？

标签： xaml win-universal-app windows-10 commandbar uwp-xaml

【解决方案1】：

您可以使用 VisualState 类来根据屏幕大小调整事物的对齐方式，使用 StateTriggers 属性。这里有一些关于这个类的文档，包括一些示例代码在这里https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.visualstate.statetriggers.aspx

此示例代码演示使用：https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlStateTriggers

简单实现：

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                <!--VisualState to be triggered when window width is >=720 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="myPanel.VerticalAlignment" Value="Bottom" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <StackPanel x:Name="myPanel" VerticalAlignment="Top">
        <TextBlock Text="This is a block of text for an example. " 
                   Style="{ThemeResource BodyTextBlockStyle}"/>

    </StackPanel>

（就是这个例子，但是根据你的情况改变了值。https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.visualstate.statetriggers.aspx）

【讨论】：

您的示例正在运行，但我如何告诉 VisualState 使用 AdaptiveTriggers 将 <CommandBar/> 放入 <Page.TopAppBar/> 或 <Page.BottomAppBar/> 中？不只是改变一个属性，而是改变CommandBar的父节点...
啊，我没试过那样做，但似乎可以通过操作集合来更改 Parent，这里提到了。（否则，父级是只读的。）msdn.microsoft.com/en-us/library/windows/apps/…
@ALkyD，您可以尝试的一件事是使用相同的按钮创建TopAppBar 和BottomAppBar，然后使用VisualState 更改两者之间的Visibility 属性..