当 Height 设置为 Auto 或 VerticalAlignment 设置为 Stretch 时，ScrollViewer 不滚动 [英] ScrollViewer not scrolling when Height set to Auto or VerticalAlignment set to Stretch

问题描述

我正在尝试使用 ScrollViewer 内的 ItemsControl 允许在设置列表上垂直滚动.当我将 ScrollViewer 的高度设置为 400 之类的常量时滚动工作，但当我将高度设置为自动或将 VerticalAlignment 设置为拉伸时停止工作.

I'm trying to allow vertical scrolling on a list of settings, using an ItemsControl inside of a ScrollViewer. The scrolling works when I set the Height of the ScrollViewer to a constant like 400, but stops working when I set the height to auto or set the VerticalAlignment to stretch.

这是我的代码

<ScrollViewer VerticalAlignment="Stretch" >
    <ItemsControl ItemsSource="{x:Bind _settingsViewModel.Settings}"
                      ItemTemplate="{StaticResource SettingTemplate}"/>
</ScrollViewer>

如何设置 ScrollViewer 的高度以适应屏幕大小但仍允许滚动?

How can I set the Height of the ScrollViewer to fit the size of the screen but still allow scrolling?

我还应该提到我的页面作为 NavigationView 内的内容页面存在.

I should also mention that my page exists as a content page inside of a NavigationView.

这是我的导航视图中的所有内容:

Here is everything inside my navigation view:

<StackPanel>
    <breadcrumb:BreadcrumbControl
      x:Name="breadcrumbTrail"
      DisplayMemberPath="Title"
      HomeText="Home"
      Seperator="/"
      OverFlow="..."
      HomeSelected="breadcrumbTrail_HomeSelected"
      />

    <Frame x:Name="ContentFrame" Margin="24" Navigated="Frame_Navigated">
        <Frame.ContentTransitions>
            <TransitionCollection>
                <NavigationThemeTransition/>
            </TransitionCollection>
        </Frame.ContentTransitions>
    </Frame>
</StackPanel>

推荐答案

根据 这篇文章 如果不直接设置 ScrollView 的高度，ScrollView 不能存在于堆栈面板内.由于此 ScrollView 存在于嵌套在 StackPanel 内的 Frame 内，您将遇到所描述的问题.

According to this post a ScrollView cannot exist inside of a stack panel without directly setting the height of the of the ScrollView. Since this ScrollView exists inside of a Frame that is nested inside of a StackPanel you will run into the issue described.

您可以使用 Grid 而不是 StackPanel 来实现您正在寻找的效果.

You could use a Grid instead of a StackPanel to achieve the effect you are looking for.

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

      <breadcrumb:BreadcrumbControl
      x:Name="breadcrumbTrail"
      DisplayMemberPath="Title"
      HomeText="Home"
      Seperator="/"
      OverFlow="..."
      HomeSelected="breadcrumbTrail_HomeSelected"
      Grid.Row="0"
      />

    <Frame x:Name="ContentFrame" Margin="24" Navigated="Frame_Navigated" Grid.Row="1">
        <Frame.ContentTransitions>
            <TransitionCollection>
                <NavigationThemeTransition/>
            </TransitionCollection>
        </Frame.ContentTransitions>
    </Frame>
</Grid>

这篇关于当 Height 设置为 Auto 或 VerticalAlignment 设置为 Stretch 时，ScrollViewer 不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！