Windows 10 UAP :绑定命令栏

Question

我正在制作一个UAP Windows 10应用程序。像微软的app News一样，我试图在桌面视图中将CommandBar放在页面的顶部，在移动视图中放在页面的底部。

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

有想法吗？谢谢你。

Answer 1

通过使用StateTriggers属性，可以使用VisualState类根据屏幕的大小调整对齐方式。下面是关于这个类的一些文档，其中包括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)