UWP应用程序中的CommandBar溢出 - 可以滚动吗？

Question

背景

我正在开发一款UWP应用程序，专为移动设备，桌面等设计。

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

问题

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

以下是一个示例屏幕截图，您可以在其中看到＆＃34; Documents＆＃34;标签被切断了。还有另一个按钮（无法看到/访问），我想你会说是＆＃34;在＆＃34;下面＃34; ...按钮：

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>

我需要什么

我仍然需要用户可以访问其他AppBarButton。

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

我在考虑（当然，某种程度上）可能以某种方式允许水平滚动以访问其他按钮？

我尝试了什么

我已经将一些非必要命令移到了CommandBar.SecondaryCommands，以释放一些空间;可以在上面的截图/ XAML中看到 - 然而，主要问题仍然很明显。

没有ScrollViewer附加属性，尝试将AppBarButton嵌入其中一个自然会引发编译错误：

  

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

我已经在网上搜索了广泛的答案，看看是否可能，并且它没有出现很多关于如何解决这个问题的文献（或任何类似的StackOverflow答案）。 / p>

非常感谢所有建议。提前谢谢。

Answer 1

至于我，它的用户体验行为并不是很好，但您可以覆盖<ul class="nav nav-tabs"> <li class="active"><a href="#January" data-toggle="tab">JAN</a></li> <li><a href="#February" data-toggle="tab">FEB</a></li> <li><a href="#March" data-toggle="tab">MAR</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="January"> <h3>Jan Data</h3> </div> <div class="tab-pane" id="February"> <h3>Feb Data</h3> </div> <div class="tab-pane" id="March"> <h3>Mar data</h3> </div> </div> 的{​​{1}}并将主要Style换成CommandBar。

找到默认样式并找到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>

P.S。 full xaml on pastebin