如何使某个部分可滚动

Question

我有以下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);

我能做什么来解决这个问题吗?

Answer 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它们实用且易于使用，但是它们有一堆怪癖和限制，使它们不适合许多情况，比如这个

编辑:确保，也，网格不包含在另一个垂直的StackPanel，网格行与高度设置为Auto，或类似的东西。

Answer 2

如果你的WrapPanel的高度超过了你放置控件的控件或窗口的高度，那么在堆栈面板内的换行面板下面的文本块就会被放在换行面板之后，因此它在滚动区域的下面。为了能够让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>

Answer 3

您必须为scrollviewer设置一个固定的高度-如果没有，scrollviewer将占用尽可能多的空间，以便显示其子元素的完整内容。

解决方案:

• 设置scollviewer的高度属性
• 使用网格代替stackpanel，并将第一和第三行height设置为auto