防止 WPF 网格超出父边界

Question

在我的 UI 中，我有一个两列一行的大网格。在右列中，我有一个包含三行的网格，在最上面一行我有一个用户控件，在下面两行我有两个 Expander 对象，每个对象都包含一个 ItemsControl 和一个填充列表运行。有时，该列表会变得非常长，并且会从屏幕“溢出”到底部。

我想要做的是让用户看到两个扩展器，能够展开或折叠它们，同时保持它们都在视线范围内。我尝试将它们包装在 WrapPanels 或 StackPanel 中，但无济于事。

这里有一些代码可以帮助解释我的问题：

<Grid Grid.Row="1" x:Name="grid1">
<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
<Expander Grid.Row="0" Header="Expander 1" x:Name="expander1" FontSize="14" IsExpanded="True">
    <Expander.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC4C4C4" Offset="0" />
            <GradientStop Color="White" Offset="1" />
        </LinearGradientBrush>
    </Expander.Background>
    <ContentPresenter Content="{Binding ViewModel.OpenAlerts, ElementName=m_viewControl}" ClipToBounds="True"/>
</Expander>
<Expander Grid.Row="1" x:Name="expander2" Header="Expander 2" FontSize="14" IsExpanded="True">
    <Expander.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC4C4C4" Offset="0" />
            <GradientStop Color="White" Offset="1" />
        </LinearGradientBrush>
    </Expander.Background>
    <ContentPresenter Content="{Binding ViewModel.ClosedAlerts, ElementName=m_viewControl}" ClipToBounds="True"/>
</Expander>
</Grid>

我们将不胜感激任何帮助或提示！

谢谢， 约翰。

Answer 1

目前还不清楚Expanders 中有哪些 UI 元素，但例如 ListBox 可以正常工作，当项目数大于 Grid 行中分配的空间时，它会显示滚动条.

但您也可以将 StackPanel 中的项目列表包装在 ScrollViewer 中，这也可以正常工作：

<Expander Grid.Row="0" Header="Expander 1" x:Name="expander1" FontSize="14" IsExpanded="True">
  <Expander.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#FFC4C4C4" Offset="0" />
      <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>
  </Expander.Background>
  <ScrollViewer>
    <StackPanel>
      <TextBlock>Test</TextBlock>
      <TextBlock>Test</TextBlock>
      <TextBlock>Test</TextBlock>
      <!-- etc.. -->
      <!-- etc.. -->
    </StackPanel>
  </ScrollViewer>
</Expander>

这也应该适合你。