如何使某个部分可滚动答案

【问题标题】：How to make a certain section scrollable如何使某个部分可滚动
【发布时间】：2015-07-14 10:27:46
【问题描述】：

我有以下 XAML：

    <StackPanel HorizontalAlignment="Center">
      <Image Name="logo" Source="logo.png" Margin="0,0,0,50"/>
      <ScrollViewer>
        <Dashboard_Control:AlignableWrapPanel x:Name="wrapPanel"/>
      </ScrollViewer>
      <TextBlock FontWeight="Bold" HorizontalAlignment="Center" x:Name="txtBottomText"></TextBlock>
    </StackPanel>

我希望wrapPanel 只能滚动，以便在您滚动时txtBottomText 控件将始终位于底部，而logo 图像控件将始终位于顶部 - 基本上只允许wrapPanel 可滚动。

我已尝试添加如上所示的 ScrollViewer，但它从未显示。我什至尝试添加一个属性以始终具有垂直滚动条，但是它出现时没有让我滚动（滚动条被禁用）。

我怀疑这是因为我的 wrapPanel 的内容是在运行时动态生成的，如下所示：

wrapPanel.Children.Add(content);

有什么想法可以解决这个问题吗？

【问题讨论】：

标签： c# .net wpf xaml user-interface

【解决方案1】：

这不是因为您的 wrapPanel 的内容。但是因为您使用 StackPanel 来包含所有内容。

StackPanel 会按照其Orientation 属性确定的方向无限增长。默认情况下是垂直的。

在您的情况下，这使 ScrollViewer “认为”它有足够的可用空间来拉伸自身以容纳其内容，而不是激活滚动条。所以它只是随着内部 WrapPanel 变大而变大，将 TextBlock 向下推。

为避免这种情况，您需要使用能够为每个控件正确分配可用空间的不同面板。像一个网格。

<Grid HorizontalAlignment="Center">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Image Name="logo" Source="logo.png" Margin="0,0,0,50"/>
  <ScrollViewer Grid.Row="1">
    <Dashboard_Control:AlignableWrapPanel x:Name="wrapPanel"/>
  </ScrollViewer>
  <TextBlock Grid.Row="2" FontWeight="Bold" HorizontalAlignment="Center" x:Name="txtBottomText"></TextBlock>
</Grid>

我通常说 StackPanel 往往被过度使用：P 它们实用且易于使用，但它们有很多怪癖和限制，使其不适合许多情况，例如这种情况。

编辑：还要确保 Grid 不包含在另一个垂直 StackPanel、高度设置为 Auto 的 Grid 行或类似的东西中。

【讨论】：

【解决方案2】：

如果 WrapPanel 的高度超过了放置控件的控件或窗口的高度，则 Stack Panel 内 Wrap Panel 下方的 Textblock 将放在 Wrap 面板之后，因此它位于滚动区域下方。为了能够让 Textblock 始终可见，您有两种方法： 1) 限制 Wrap 面板的高度 2）使用像3行网格这样的容器而不是堆栈面板，并将网格的行高分别放在 Auto, *, Auto 以便顶部的图像和底部的文本块使用其内容的空间，滚动面板使用剩余的所有空间

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Image Grid.Row ="0" Source="myimage.jpg"   />
    <ScrollViewer Grid.Row="1">
        <WrapPanel Height="1200" Width="600">
            <TextBlock>Ciao sono io</TextBlock>

        </WrapPanel>

    </ScrollViewer>
    <TextBox Grid.Row="2" TextWrapping="Wrap"   HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Text="IO c'ero" />

</Grid>

【讨论】：

谢谢，+1 的好答案！

【解决方案3】：

您必须为您的滚动查看器设置一个固定的高度 - 如果没有，滚动查看器会占用他需要的空间，以便显示其子项的完整内容。

解决方案：

设置 scollviewer 的 Height 属性
使用网格而不是堆栈面板，将第一和第三行高设置为自动

【讨论】：