如何在 WPF 中创建此布局（3 个控件）？

Question

我制作了这张显示控件的图像。最上面的一个是 ListView，其他是 ListView 控件以及其他控件。

但我不知道如何将它们布局成这样。

目前，我为每个 ListView 使用 3 个 DockPanels，其中顶部的一个使用 Top VerticalAlignment，其他的使用 Bottom 作为 VerticalAlignment 、左和右（对于水平对齐）。

但是当我查看它时，其他 2 个控件出现在顶部 ListView 之后的右侧。当我将顶部 DockPanel 缩放到一半大小时，我可以看到这一点，然后显示其他 2 个 DockPanel，它们连接到顶部 DockPanel 的右侧。

关于如何解决这个问题有什么想法吗？

Answer 1

这个怎么样？

网格没有固定的宽度或高度，并且应该容纳您添加的任何控件。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Background="Aqua" Height="100"/>
    <StackPanel Grid.Row="2" Grid.Column="0" Background="Orange" Height="100" Width="150" VerticalAlignment="Bottom"/>
    <StackPanel Grid.Row="2" Grid.Column="2" Background="Green" Height="60" Width="200" VerticalAlignment="Bottom"/>
</Grid>

初始窗口

调整大小的窗口

编辑以响应评论

如果您想在顶部面板中显示进度条，只需使用：

    <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" 
       Background="Aqua" Orientation="Vertical">
        <ListView Height="50" Background="Purple"></ListView>
        <ProgressBar Height="20" IsIndeterminate="True" ></ProgressBar>
    </StackPanel>

Answer 2

您需要它们是 DockPanel，还是这是固定布局？

如果它已修复，您可以执行以下操作：

<Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="80"></RowDefinition>
      <RowDefinition Height="*"></RowDefinition>
      <RowDefinition Height="50"></RowDefinition>
      <RowDefinition Height="50"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="100"></ColumnDefinition>
      <ColumnDefinition Width="*"></ColumnDefinition>
      <ColumnDefinition Width="200"></ColumnDefinition>
    </Grid.ColumnDefinitions>
<ListView Grid.Row="0" Grid.RowSpan="1" Grid.Column="0" Grid.ColumnSpan="3" Name="dockPanel1" Background="CadetBlue">
    </ListView>
    <ListView Grid.Row="2" Grid.RowSpan="2" Name="dockPanel2" Background="Cyan">
    </ListView>
    <ListView Grid.Row="3" Grid.RowSpan="1" Grid.Column="2" Name="dockPanel3" Background="DarkRed">
    </ListView>
  </Grid>

我使三个面板之间的区域随着窗口大小的调整而调整大小。

除了我使用的列表视图之外，您还可以放置几乎任何内容，用户控件、另一个网格等等。

颜色将向您轻松显示列表视图部分的位置。

您可能想要调整大小，或更改调整大小行为。

您可以在此处了解有关网格的更多信息

Answer 3

看起来这就是对齐、边距和填充的场景为处理...