Question

我有这个屏幕，用户可以更改高度，并根据我希望我的ScrollViewer显示滚动条（如果需要）但它总是变成相同的大小。

请注意，只有父网格的第二行会更改大小（*），并根据该大小我想要ScrollViewer大小，并根据ScrollViewer内的网格内容（即通过代码动态添加）scrollBar应该显示。

<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>

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

WPF ScrollViewer，内置网格和动态大小

1 个答案: