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

Question

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

但是我不知道如何布局它们。

目前，我为每个ListView使用3个DockPanels ，其中最上面的一个使用Top VerticalAlignment ，其他的使用Bottom分别用于VerticalAlignment ，Left和Right（对于HorizontalAlignment ）。

但是当我查看它时，其他2个控件出现在顶部ListView右侧之后。 当我将顶部的DockPanel缩放到一半大小时，我看到了这一点，然后显示了另外两个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

您需要它们成为DockPanels，还是固定布局？

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

<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

似乎是这种情况，例如对齐，边距和填充可以处理...