带有内部网格和动态大小的 WPF ScrollViewer

Question

我有这个屏幕，用户可以更改高度，基于此，我希望我的ScrollViewer 在需要时显示滚动条，但它始终保持相同大小。

请注意，只有父网格的第二行会更改大小 (*)，并且基于该大小我想要我的 ScrollViewer 大小，并基于 ScrollViewer 内的网格内容（通过动态添加代码）滚动条应该显示。

<Grid Style="{StaticResource PopupBody}">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="*" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>

    <!-- Header Panel -->
    <StackPanel x:Name="PopupHeader"
                    Grid.Row="0">
        <Label x:Name="PopupTitle"
                Style="{StaticResource PopupTitle}"
                Content="Column Updatable Detail"/>
    </StackPanel>

    <!-- Body Panel -->
    <DockPanel x:Name="PopupBody"
                    Grid.Row="1"
                    Margin="10,10,10,0" Height="350" VerticalAlignment="Top">


        <StackPanel DockPanel.Dock="Top" Margin="{StaticResource MarginSmallHorizontal}">
            <Grid Margin="{StaticResource MarginSmallVertical}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="250" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                (... Hidden to be more readable ... )

                <ScrollViewer Grid.Row="1" Grid.ColumnSpan="3"
                              VerticalScrollBarVisibility="Auto" 
                              CanContentScroll="True">
                    <Grid x:Name="gridData" 
                            ShowGridLines="True"
                            Margin="0,0,0,0" >
                    </Grid>
                </ScrollViewer>



            </Grid>
        </StackPanel>

    </DockPanel>

    <!-- Footer Panel -->
    <Border Grid.Row="2" 
                Style="{StaticResource FooterBorder}">
        <StackPanel x:Name="FooterPanel"
                        Style="{StaticResource FooterPanel}">

            <Button x:Name="CancelButton"
                    Content="Close"
                    Style="{StaticResource FooterSecondaryButton}"
                    Click="OnCancelClicked"/>

        </StackPanel>
    </Border>
</Grid>

有人可以帮忙吗？

Answer 1

Body Panel 部分中嵌套面板的泥潭是罪魁祸首。我已经创建了一个显示我认为你想要什么的最小骨架。以此为起点：

<Window x:Class="WpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="200"
        Height="300">

  <!-- Layout Root -->
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <!-- Header Panel -->
    <Border Grid.Row="0" Background="#CCCCCC" Padding="11">
      <!-- Replace this TextBlock with your header content. -->
      <TextBlock Text="Header Content" TextAlignment="Center" />
    </Border>

    <!-- Body Panel -->
    <Grid Grid.Row="1" Background="#CCCCFF">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <Border Grid.Row="0" Background="#FFCCCC" Padding="11">
        <!-- Replace this TextBlock with your upper body content. -->
        <TextBlock Text="Upper Body Content" TextAlignment="Center" />
      </Border>

      <ScrollViewer Grid.Row="1" Padding="11"
                    VerticalScrollBarVisibility="Auto">

        <!-- Replace this Border with your scrollable content. -->
        <Border MinHeight="200">
          <Border.Background>
            <RadialGradientBrush RadiusY="1" RadiusX="1" Center="0.5,0.5">
              <GradientStop Color="White" Offset="0" />
              <GradientStop Color="Black" Offset="1" />
            </RadialGradientBrush>
          </Border.Background>
        </Border>

      </ScrollViewer>
    </Grid>

    <!-- Footer Panel -->
    <Border Grid.Row="2" Background="#CCFFCC" Padding="11">
      <!-- Replace this TextBlock with your footer content. -->
      <TextBlock Text="Footer Content" TextAlignment="Center" />
    </Border>
  </Grid>

</Window>

下面的屏幕截图显示了布局如何响应垂直大小的变化。请注意，一旦高度低于显示主体内容所需的大小，垂直滚动条如何变得可见。