c# - UWP CommandBar 动态大小和位置

Question

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

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

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

最好的问候

Answer 1

As an example, in the default weather app, there is such an effect.

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

例如:

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

Second, i want to switch from the CommandBar on the Top, to a CommandBar on the bottom, like a CommandBar inside Page.BottomAppBar, on specific device families.

您可以在 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>