-1

背景

我正在开发一个 UWP 应用程序，它是为移动、桌面等设计的。

我CommandBar在某些页面上遇到了一些困难 - 特别是在手机上（但这也可能适用于较小的桌面窗口）。

问题

在我需要很多AppBarButtons 的地方CommandBar，有时它会溢出，我无法看到/访问隐藏的按钮。

这是一个示例屏幕截图，您可以在其中看到“文档”标签被切断。还有另一个按钮（无法看到/访问），我猜你会说它在...按钮“下方”：

示例命令栏溢出屏幕截图

XAML

为简洁起见缩短（这里没有什么特别/不寻常的）

<CommandBar>
    <!-- Secondary Commands -->
    <CommandBar.SecondaryCommands>
        <AppBarButton Command="{Binding RefreshCommand}"
                      Icon="Refresh" Label="Refresh"/>
        <AppBarButton Command="{Binding AddToLibraryCommand}"
                      Icon="Save" Label="Add to Library"/>
    </CommandBar.SecondaryCommands>

    <!-- Primary Commands -->
    <CommandBar.PrimaryCommands>
        <AppBarButton Command="{Binding CompleteFormCommand}"
                      Icon="Paste" Label="Complete a Form" />
        <AppBarSeparator />
        <AppBarButton Command="{Binding ViewPeopleCommand}"
                      Icon="People" Label="People" />
        <AppBarButton Command="{Binding ViewPropertiesCommand}"
                      Icon="Home" Label="Properties" />
        <AppBarButton Command="{Binding ViewDocumentsCommand}"
                      Icon="Folder" Label="Documents" />
        <AppBarSeparator />
        <AppBarButton Command="{Binding ViewMapCommand}"
                      Icon="Map" Label="Map" />
    </CommandBar.PrimaryCommands>
</CommandBar>

我需要的

我仍然需要其他AppBarButtons 可供用户访问。

每个按钮的数量CommandBar可能会有所不同 - 有时它们很合适，有些隐藏了 1 个（如示例），有些隐藏了 2 或 3 个。

我在想（当然，不知何故）可能以某种方式允许水平滚动以访问其他按钮？

我试过的

我已经采取了将一些非必要命令移至CommandBar.SecondaryCommands, 以释放一些空间；从上面的屏幕截图/XAML 中可以看出 - 但是，主要问题仍然很明显。

没有ScrollViewer附加属性，尝试将AppBarButtons 嵌套在其中自然会引发编译器错误：

无效类型：预期类型是IObservableVector<ICommandBarElement>or ICommandBarElement，实际类型是ScrollViewer。

我已经在网上搜索了很多答案，看看是否有可能，而且似乎没有太多关于我如何解决这个问题的文献（或任何类似的 StackOverflow 答案）。

非常感谢所有建议。先感谢您。

4

1 回答 1

0

至于我，这不是很好的 UX 行为，但您可以覆盖StyleforCommandBar并将 primary 包装ItemsControl到ScrollViewer.

找到默认样式并找到PrimaryItemsControl并替换为：

<ScrollViewer VerticalScrollMode="Disabled"
                VerticalScrollBarVisibility="Disabled"
                HorizontalScrollMode="Enabled"
                HorizontalScrollBarVisibility="Visible">
    <ItemsControl x:Name="PrimaryItemsControl"
                    HorizontalAlignment="Right"
                    MinHeight="{ThemeResource AppBarThemeMinHeight}"
                    IsTabStop="False"
                    Grid.Column="1">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</ScrollViewer>

之后不要忘记应用新样式CommandBar：

<CommandBar Style="{StaticResource ScrollablePrimaryComamndCommandBar}">

在 pastebin 上PS 完整的 xaml

于 2017-01-31T13:07:47.643 回答