如何使某个部分可滚动

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包含所有内容。

StackPanels在由其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>

我通常会说StackPanels往往被过度使用：P它们实用且易于使用，但是它们有很多怪癖和局限性，因此不适用于许多情况，例如这种情况。

编辑：同样，还要确保网格不包含在另一个垂直StackPanel，高度设置为Auto的网格行之内。

Answer 2

如果WrapPanel的高度超过放置控件的控件或窗口的高度，则将“堆栈面板”内部“环绕面板”下方的“文本块”放置在“环绕面板”之后，因此位于滚动区域下方。 为了使Textblock始终可见，您有两种方法：1）限制Wrap面板的高度2）使用具有3行的Grid之类的容器而不是堆栈面板，并将Grid的Row Heights分别设置为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

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

解决方案：

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