UWP CommandBar 动态大小和位置答案

【问题标题】：UWP CommandBar dynamic Size and PositionUWP CommandBar 动态大小和位置
【发布时间】：2016-05-07 20:38:39
【问题描述】：

在我的应用程序中，我在应用程序顶部使用带有多个 AppBarButtons 的 CommandBar。现在，如果我调整窗口大小，我希望 AppBarButtons 转到 CommandBar.SecondaryButtons，如果它们不再适合窗口的整个宽度。例如，在默认的天气应用中，就有这样的效果。

其次，我想在特定设备系列上从顶部的 CommandBar 切换到底部的 CommandBar，例如 Page.BottomAppBar 内的 CommandBar。我不知道，是否应该在我的 xaml 中设置两个 CommandBars 并显示满足条件的一个，或者是否有更好的方法。我喜欢尽可能多地使用 VisualStates，但我不知道如何实现这一点。

我知道这是两个问题，但都指向CommandBar，所以我希望有人能帮助我吗？

最好的问候

【问题讨论】：

标签： c# .net win-universal-app windows-10-universal commandbar

【解决方案1】：

例如，在默认的天气应用中，就有这样的效果。

您可以使用VisualStateManager 管理视觉状态和控件视觉状态之间转换的逻辑，并使用AppBarButton 的Visibility 属性来显示或隐藏它。

例如：

我在CommandBar.PrimaryCommands 中添加了两个AppBarButton，在CommandBar.SecondaryCommands 中添加了两个AppBarButton。当窗口宽度小于720时，我将CommandBar.PrimaryCommands中AppBarButton的Visibility属性设置为Collapsed。当窗口宽度大于720或等于720时，我将CommandBar.SecondaryCommands中AppBarButton的Visibility属性设置为Collapsed。

XAML 代码：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="PrimaryHome.Visibility" Value="Collapsed"/>
                    <Setter Target="PrimaryAdd.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="SecondHome.Visibility" Value="Collapsed"/>
                    <Setter Target="SecondAdd.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>
<Page.TopAppBar>
    <CommandBar x:Name="TopCommands" >
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="PrimaryHome" Icon="Home" Label="Home"/>
            <AppBarButton Name="PrimaryAdd" Icon="Add" Label="Add"  />
        </CommandBar.PrimaryCommands>
        <CommandBar.SecondaryCommands>
            <AppBarButton Name="SecondHome" Icon="Home" Label="Home" />
            <AppBarButton Name="SecondAdd" Icon="Add" Label="Add" />
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.TopAppBar>

其次，我想在特定设备系列上从顶部的 CommandBar 切换到底部的 CommandBar，例如 Page.BottomAppBar 中的 CommandBar。

您可以在 XAML 中添加 Page.TopAppBar 和 Page.BottomAppBar。并使用VisualStateManager 管理应该在哪个CommandBar 上显示页面。

例如：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TopCommands.Visibility" Value="Visible"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="BottonCommands.Visibility" Value="Visible"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>
<Page.TopAppBar>
    <CommandBar x:Name="TopCommands" Visibility="Collapsed" >
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="PrimaryHome" Icon="Home" Label="Home"/>
            <AppBarButton Name="PrimaryAdd" Icon="Add" Label="Add"  />
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.TopAppBar>
<Page.BottomAppBar>
    <CommandBar x:Name="BottonCommands" Visibility="Collapsed">
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="BottonPrimaryHome" Icon="Home" Label="Home"/>
            <AppBarButton Name="BottonPrimaryAdd" Icon="Add" Label="Add"  />
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

【讨论】：

感谢您的回答，正是我搜索的内容！

【解决方案2】：

对于您的第一个问题：您可以在CommandBar 的Primary 和Secondary 部分设置按钮。然后使用VisualStates 切换它们的可见性取决于应用程序的宽度。或者您可以使用页面的SizeChanged 事件完全在代码中完成。

第二个问题，让我们创建类似的东西

<Page>
    <Grid>
<!-- row definition here -->
<!-- Row 1 -->
<!-- Row 2 -->

<!-- Content -->
<Grid Grid.Row="0"/>

<!-- app bar -->
<CommandBar Grid.Row="1"/>
    </Grid>
</Page>

使用VisualStates 将附加属性Grid.Row 更改为所需的数字，类似于问题一。

【讨论】：

感谢您的回答，正是我搜索的内容！