Полоса прокрутки перекрывает панель команд в UWP

Question

Хорошо, значит, полоса прокрутки с моего Хаба (я думаю) перекрывает мою командную панель, и с тобой невозможно взаимодействовать. Так как мне его отключить (полоса прокрутки)? Чтобы сделать это невидимым? Я попытался добавить ScrollViewer.Hor horizontalScrollBarVisibility="Hidden" в Hub, Grid, но это мне совсем не помогло.

Вот XAML страницы:

<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

@ Ответ Криса - одно из решений вашей проблемы. Вы можете разместить CommandBar внутри содержимого вашего приложения в любом месте вашего XAML. Однако, как правило, мы назначаем его панели приложения на странице, особенно если CommandBar должен оставаться видимым для пользователя, когда появляется сенсорная клавиатура или мягкая панель ввода (SIP).

Как вы хотите поставить CommandBar на Bottom, то вы можете использовать свойство BottomAppBar 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: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>

Для получения дополнительной информации, пожалуйста, смотрите Размещение в панели приложений и панели команд.

Чтобы скрыть ScrollBar нам нужно отредактировать стили и шаблоны Hub, так как Hub неявно поддерживает scrollview в своем шаблоне. В его шаблоне мы можем найти HorizontalScrollBarVisibility свойство фиксируется на 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>

Таким образом, мы можем просто изменить его на Hidden затем назначьте этот новый стиль Hub, После этого не должно быть полосы прокрутки.

Answer 2

Вам просто нужно использовать Grid способ, которым он предназначен для использования в макете, потому что ваши текущие результаты будут ожидать, как у вас в настоящее время. Чтобы это исправить, сделайте это;

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

  <Hub></Hub>

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

</Grid>

Ура!