3

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

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

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

此致

4

2 回答 2

4

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

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

例如：

我在 中添加两个AppBarButton，在 中添加CommandBar.PrimaryCommands两个。当窗口的宽度小于 720 时，我将in的属性设置为. 当窗口的宽度大于 720 或等于 720 时，我将in的属性设置为.AppBarButtonCommandBar.SecondaryCommandsVisibilityAppBarButtonCommandBar.PrimaryCommandsCollapsedVisibilityAppBarButtonCommandBar.SecondaryCommandsCollapsed

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>
于 2016-05-09T08:32:52.173 回答
3

对于您的第一个问题：您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

于 2016-05-09T07:26:35.820 回答