UWP CommandBar动态尺寸和位置

Question

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

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

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

诚挚的问候

Answer 1

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

第二个问题，让我们创建这样的东西

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

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

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

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

Answer 2

例如，在默认天气应用程序中，存在这样的效果。

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

例如：

我在CommandBar.PrimaryCommands中添加了两个CommandBar.PrimaryCommands，在CommandBar.SecondaryCommands中添加了两个AppBarButton。当窗口宽度小于720时，我将Visibility属性在CommandBar.PrimaryCommands中设置为Collapsed。当窗口的宽度大于720或equles为720时，我将Visibility属性在CommandBar.SecondaryCommands中设置为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>