UWP CommandBar 动态大小和位置

Question

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

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

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

此致

Answer 1

关于您的第一个问题：您可以在 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>

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

Answer 2

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

您可以使用 AppBarButton 的 VisualStateManager to manages visual states and the logic for transitions between visual states for controls and use the Visibility 属性来显示或隐藏它。

例如：

我在 CommandBar.PrimaryCommands 中添加了两个 AppBarButton，在 CommandBar.SecondaryCommands 中添加了两个 AppBarButton。当window的宽度小于720时，我把CommandBar.SecondaryCommands中AppBarButton的Visibility property of the AppBarButton in CommandBar.PrimaryCommands to Collapsed. When the width of window large than 720 or equles to 720, I set the 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>

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>

UWP CommandBar 动态大小和位置

UWP CommandBar dynamic Size and Position

.net

c#

commandbar

win-universal-app

windows-10-universal