滚动条与 UWP 中的命令栏重叠

Question

好的，所以我中心的滚动条（我认为）与我的命令栏重叠，无法与您互动。那么我该如何禁用它（scollbar）呢？让它隐形？我尝试将 "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>

Answer 1

您只需要按照在布局中使用的方式使用 Grid，因为您当前的结果将与您当前的结果一致。要修复它，请执行此操作；

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

  <Hub></Hub>

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

</Grid>

干杯！

Answer 2

@Chris 的回答是解决您问题的一种方法。您可以放置一个 CommandBar inline with your app content, anywhere in your XAML. However more typically, we would assign it to the App Bar of a Page，尤其是当 CommandBar 必须在触摸键盘或软输入面板 (SIP) 出现时对用户保持可见的情况下。

如你想把CommandBar放在Bottom处，那么你可以使用Page的BottomAppBar 属性 like[=25] =]

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

有关详细信息，请参阅 App bar and command bar 中的 Placement。

要隐藏 ScrollBar，我们需要编辑 Hub styles and templates as Hub 在其模板中隐式支持滚动视图。在它的模板中，我们可以发现 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。之后，应该没有滚动条了。

滚动条与 UWP 中的命令栏重叠

Scrollbar is overlapping command bar in UWP

c#

xaml

scrollbar

commandbar

uwp