CommandBar overflow in UWP app - can it be scrollable?

Question

Background

I am developing a UWP app, which is being designed for mobile, desktop etc.

I am having a bit of difficulty with the CommandBar on certain pages - specifically on a phone (but this may also apply to a smaller desktop window).

---

Issue

Where I require quite a few AppBarButtons on the CommandBar, sometimes it overflows and I am unable to see/access the hidden buttons.

Here is a sample screenshot where you can see that the "Documents" label is being cut off. There is also another button (which cannot be seen/accessed) which I guess you would say is "underneath" the ... button:

---

XAML

Shortened for brevity (nothing special/out of the ordinary here)

<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>

---

What I need

I still need the other AppBarButtons to be accessible by the user.

The amount of buttons on each CommandBar can vary - sometimes they fit fine, some have 1 (like the example) hidden, others have 2 or 3 hidden.

I am thinking that (surely, somehow) it might be possible somehow to allow horizontal scrolling in order to access the other buttons?

---

What I have tried

I have resorted to moving some of the non-essential commands to the CommandBar.SecondaryCommands, to free up some space; as can be seen in the screenshot/XAML above - however, the main problem is still apparent.

There is no ScrollViewer attached property, and trying to nest the AppBarButtons inside one naturally throws me a compiler error:

Invalid type: expected types are IObservableVector<ICommandBarElement> or ICommandBarElement, actual type is ScrollViewer.

I have searched the Web far and wide for answers to see if it is possible, and it doesn't appear there is much literature (or any similar StackOverflow answers) on how I can go about solving this issue.

---

All advice is greatly appreciated. Thank you in advance.

Answer 1

As for me, it is not pretty good UX behavior, but you can override Style for CommandBar and wrap primary ItemsControl into ScrollViewer.

Find the default style and find the PrimaryItemsControl and replace to:

<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>

After that don't forget apply new style for CommandBar:

<CommandBar Style="{StaticResource ScrollablePrimaryComamndCommandBar}">

P.S. full xaml on pastebin