SplitView.Content 中的 UWP ScrollViewer 不滚动答案

【问题标题】：UWP ScrollViewer inside a SplitView.Content not scrollingSplitView.Content 中的 UWP ScrollViewer 不滚动
【发布时间】：2016-11-17 22:31:52
【问题描述】：

我正在尝试构建一个 UWP 应用，我有以下组件：

主页：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

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

    <StackPanel Name="TituloStackPanel" Orientation="Horizontal">
        <Button Name="HamburguerButton" Content="&#xE700;" FontFamily="Segoe MDL2 Assets" Height="50" Width="50" Click="HamburguerButton_Click"/>
        <TextBlock Name="Titulo" Text="Estrutura de Dados" VerticalAlignment="Center" Margin="10"/>
    </StackPanel>

    <SplitView Name="PrincipalSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
               CompactPaneLength="50" OpenPaneLength="200" Grid.Row="1">
        <SplitView.Pane>
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button Name="ListasButton" Content="L" Width="50" Height="50" Click="ListasButton_Click"/>
                    <TextBlock Text="Listas" VerticalAlignment="Center" Margin="10"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button Name="PilhasButton" Content="P" Width="50" Height="50"/>
                    <TextBlock Text="Pilhas" VerticalAlignment="Center" Margin="10"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button Name="FilasButton" Content="F" Width="50" Height="50"/>
                    <TextBlock Text="Filas" VerticalAlignment="Center" Margin="10"/>
                </StackPanel>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            <TextBlock Text="SplitView Content" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </SplitView.Content>
    </SplitView>
</Grid>

下一个页面将加载到 SplitView 的内容中。

<Page>
  <Grid>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="200"/>
  </Grid.ColumnDefinitions>

    <ScrollViewer Background="Cyan" Grid.Column="1" VerticalScrollBarVisibility="Auto">
      <RelativePanel Padding="20" MaxHeight="700" VerticalAlignment="Top">
        <A lot of Components: TextBlocks, TextBoxes, RadioButtons, ... />
      </RelativePanel>
    </ScrollViewer>
  </Grid>
</Page>

ScrollViewer 应该用作窗口右侧的工具栏。但是当我调整窗口大小时，垂直滚动不起作用。

全屏：

调整大小：

【问题讨论】：

RelativeLayout 是自定义控件吗？它有什么用？
您是否将窗口大小调整得足够大以至于不需要滚动条。
@Sunteen-MSFT，但是当我将窗口调整为更小的尺寸时，滚动也不起作用。
@ThomasSchneiter，感谢您的观察！这是一个相对面板。
我无法重现您的问题。当我在 RelativePanel 内添加一个带有简单矩形（组合高度 > 700）的 StackPanel 时，ScrollViewer 会按您的意愿工作。是否有理由使用带有MaxHeight="700" 的RelativePanel？。 700之后的面板内容会这样隐藏。

标签： xaml uwp scrollviewer

【解决方案1】：

问题是因为您的 SplitView 位于带有 <RowDefinition Height="Auto"/> 的行中。这会使 SplitView 高于屏幕，因此不会滚动。
将此行使用<RowDefinition Height="*"/> 使其与屏幕一样高。

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

<SplitView Grid.Row="1">
    ....
</SpitView>

【讨论】：