Question

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

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

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

祝你好运

Answer 1

关于第一个问题：您可以在Primary的{{1}}和Secondary部分设置按钮。然后使用CommandBar根据应用的宽度切换它们的可见性。或者您可以在代码中完全使用页面的VisualStates事件。

第二个问题，让我们创建像

这样的东西

SizeChanged

使用类似于问题1的<Page> <Grid>     <Grid Grid.Row="0"/>  <CommandBar Grid.Row="1"/> </Grid> </Page>将附加属性Grid.Row更改为所需的数字。

Answer 2

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

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

例如：

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

UWP CommandBar动态大小和位置

2 个答案: