Scrollbar is overlapping command bar in UWP

Question

Ok, so scrollbar from my Hub (I think) is overlapping my command bar and it is impossible to interact with thee. So how do I disable it (the scollbar)? To get it invisible? I tried adding "ScrollViewer.HorizontalScrollBarVisibility="Hidden" to Hub, Grid but it did not helped me at all.

Here's the XAML of the page:

<Page
x:Class="CourseWorkTest.Settings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CourseWorkTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <CommandBar VerticalAlignment="Bottom">
        <AppBarButton x:Name="back"  Icon="Back" Label="Back" Click="back_Click"/>
        <AppBarButton x:Name="save" Icon="Accept" Label="Save" Click="save_Click"/>
    </CommandBar>
    <Hub Header="Settings">
        <HubSection Header="General">
            <DataTemplate>
                <Grid>
                    <StackPanel Width="500" Height="550" Background="WhiteSmoke">
                        <StackPanel Height="Auto">
                            <Button x:Name="enabledDays" Content="Enabled Days" FontWeight="Bold" Background="Transparent" Width="500" HorizontalContentAlignment="Left" Click="enabledDays_Click">
                                <Button.Flyout>
                                    <MenuFlyout x:Name="enabledDaysMenuFlyout">
                                        <ToggleMenuFlyoutItem x:Name="mon" Text="Monday" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Tuesday" x:Name="tue" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Wednesday" x:Name="wed" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Thursday" x:Name="thu" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Friday" x:Name="fri" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Saturday" x:Name="sat" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Sunday" x:Name="sun" Tag="enabledDay" Click="enabledDays_Click"/>
                                    </MenuFlyout>
                                </Button.Flyout>
                            </Button>
                            <TextBlock x:Name="enabledDaysText"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </HubSection>
        <HubSection Header="Notifications &amp; Automute">
            <DataTemplate>
                <Grid>
                    <StackPanel Width="400" Background="WhiteSmoke" Height="550">
                        <ToggleSwitch x:Name="automuteToggleSwitch" Header="Automute" HorizontalAlignment="Left" VerticalAlignment="Top" ToolTipService.ToolTip="Automute device during lesson"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </HubSection>
        <HubSection Header="Durations">
            <DataTemplate>
                <Grid>
                    <StackPanel Width="550" Height="550" Background="WhiteSmoke">
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </HubSection>
        <HubSection Header="Data">
            <DataTemplate>
                <Grid>
                    <StackPanel Width="300" Height="550" Background="WhiteSmoke">
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </HubSection>
    </Hub>
</Grid>

Answer 1

@Chris's answer is one solution for your problem. You can place a CommandBar inline with your app content, anywhere in your XAML. However more typically, we would assign it to the App Bar of a Page especially if the CommandBar must remain visible to a user when the touch keyboard, or Soft Input Panel (SIP), appears.

As you want to put the CommandBar at the Bottom, then you can use the BottomAppBar property of a Page like

<Page x:Class="CourseWorkTest.Settings"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:CourseWorkTest"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton x:Name="back" Click="back_Click" Icon="Back" Label="Back" />
            <AppBarButton x:Name="save" Click="save_Click" Icon="Accept" Label="Save" />
        </CommandBar>
    </Page.BottomAppBar>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Hub Header="Settings">
        ...
        </Hub>
    </Grid>
</Page>

For more info, please see Placement in App bar and command bar.

To hide the ScrollBar, we need to edit Hub styles and templates as Hub supports scrollview implicitly in its template. In its template, we can find the HorizontalScrollBarVisibility property is fixed to Auto.

<ScrollViewer x:Name="ScrollViewer"
              Grid.RowSpan="2"
              HorizontalScrollBarVisibility="Auto"
              HorizontalScrollMode="Auto"
              HorizontalSnapPointsAlignment="Near"
              HorizontalSnapPointsType="OptionalSingle"
              VerticalScrollBarVisibility="Disabled"
              VerticalScrollMode="Disabled"
              VerticalSnapPointsAlignment="Near"
              VerticalSnapPointsType="OptionalSingle"
              ZoomMode="Disabled">
    <ItemsStackPanel x:Name="Panel" CacheLength="20" Orientation="{TemplateBinding Orientation}" />
</ScrollViewer>

So we can simply change it to Hidden then assign this new style to Hub. After this, there should be no scroll bar.

Answer 2

You just need to use Grid the way it's meant to be used in a layout because your current results would be expected in how you have it currently. To fix it, do this;

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto">
  </Grid.RowDefinitions>

  <Hub></Hub>

  <CommandBar Grid.Row="1"></CommandBar>

</Grid>

Cheers!