Question

我尝试使用ScrollViewer中的ItemsControl尝试在设置列表中进行垂直滚动。当我将ScrollViewer的高度设置为400这样的常量时滚动工作，但是当我将高度设置为auto或将VerticalAlignment设置为拉伸时停止工作。

这是我的代码

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

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

编辑：我还应该提一下，我的页面作为NavigationView中的内容页面存在。

以下是导航视图中的所有内容：

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

Answer 1

问题是你需要限制ScrollViewer对象占用的维度！

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

那么我们上面定义了什么？

定义类型为Grid的父布局容器。
Grid布局容器有3行，中间行占用所需的空间，而第一行和最后一行将剩余的房地产剩余部分分开。

现在我们决定在中间行中定义ScrollViewer。

这是一个问题！您已在一行中定义了ScrollViewer，该行将根据其所包含的内容定义其高度。这绝对违背了ScrollViewer的概念！如果你要设置它以占据所需的空间来容纳所有孩子，你怎么能滚动一些东西？即使尺寸没有超过＆＃34;由于您没有为ScrollViewer设置最大高度，因此仍然无法实际滚动浏览任何内容，因此实际上可以显示所有内容而无需任何滚动。当ScrollViewer内的内容占据如此多的空间时，问题会变得更糟，它会占用你想要用于其他布局区域的所有空间。在这种更糟糕的情况下，尽管现有的布局没有向我们显示，但仍然无法滚动浏览任何内容......

我们如何解决这个问题？通过设置MaxHeight的{{1}}依赖项属性，就像您已经完成的那样，或者通过更改布局容器的定义。

现在，我只需将中间行设置为其他2行的2 *倍（现在ScrollViewer的大小存在限制）：

ScrollViewer

现在我们可以简单地将<Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="2*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>定义为中间行的一部分，如下所示：

ScrollViewer

如果内容中包含的内容超过计算* 2 **大小，您将看到<ScrollViewer Grid.Row="1" ...>滚动操作，就像您想要的那样！

作为一个小建议，我通常喜欢定义ScrollViewer类中定义的一些附加属性，例如ScrollViewer和{{1}在对象的定义中（为了集中水平滚动行为，我们有相同的逻辑，但对于附加的属性ScrollViewer.VerticalScrollBarVisibility和ScrollViewer.VerticalScrollMode）

在这种情况下，我将它们定义为ScrollViewer的属性，而不是HorizontalScrollMode子元素中定义的附加属性，只是因为它更容易理解开发人员的意图，我更喜欢自动定义ScrollMode行为。

HorizontalScrollBarVisibility

Answer 2

根据this post，如果没有直接设置ScrollView的高度，则ScrollView不能存在于堆叠面板内部。由于此ScrollView存在于嵌套在Frame内的StackPanel内，因此您将遇到所述问题。

您可以使用Grid代替StackPanel来达到您想要的效果。

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

当“高度”设置为“自动”或“垂直对齐”设置为“拉伸”时，ScrollViewer不会滚动

2 个答案: