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

Итак, полоса прокрутки из моего концентратора (я думаю) перекрывает мою панель команд, и с тобой невозможно взаимодействовать. Итак, как мне отключить его (полосу прокрутки)? Чтобы сделать его невидимым? Я попытался добавить "ScrollViewer.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>


c# scrollbar xaml uwp commandbar
person stroibot    schedule 24.02.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

@ Ответ Криса - одно из решений вашей проблемы. Вы можете разместить встроенную 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 поддерживает 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. После этого не должно быть полосы прокрутки.

person Jay Zuo    schedule 25.02.2017
comment
Спасибо @Chris и Jay, оба решения решили половину моей проблемы. Теперь я могу взаимодействовать с панелью команд, но полоса прокрутки все еще делает страницу отвратительной. Как я могу сделать его невидимым? Я снова попытался использовать ScrollViewer.HorizontalScrollBarVisibility=Hidden для страницы и сетки, но он все еще виден. Но все равно спасибо! - person stroibot; 25.02.2017
comment
@stroibot Я обновил свой ответ. Настройка ScrollViewer.HorizontalScrollBarVisibility здесь не сработает, так как она зафиксирована в шаблоне Hub. Мы должны изменить стиль Hub, чтобы скрыть полосу прокрутки. - person Jay Zuo; 25.02.2017
comment
У меня с этим беда. Я пробовал это, но это ничего не дало: <Page.Resources> <Style TargetType="Hub"> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/> </Style> </Page.Resources> - person stroibot; 25.02.2017
comment
@stroibot Установка этого свойства в стиле Hub также не будет работать, поскольку оно исправлено в шаблоне Hub. Мы должны войти в шаблон Hub и установить HorizontalScrollBarVisibility="Hidden" в ScrollViewer в шаблоне Hub. - person Jay Zuo; 25.02.2017
comment
Даже не учел особенности пространства аббара uwp, +1 точно. - person Chris W.; 27.02.2017

arrow_upward
1
arrow_downward

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

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

  <Hub></Hub>

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

</Grid>

Ваше здоровье!

person Chris W.    schedule 24.02.2017