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

Question

I made this image that shows the controls. The top one is a ListView and the others are ListView controls as well with additional controls.

But I can't figure out how to layout them to look like that.

Currently I use 3 DockPanels for each ListView where the top one uses Top VerticalAlignment , the others use Bottom for VerticalAlignment , Left and Right (for HorizontalAlignment ).

But when I look at it, the other 2 controls appear after the top ListView to its right side. I can see this when I scale the top DockPanel to half the size, then the other 2 DockPanels show up, attached to the top DockPanel's right side.

Any ideas on how to fix this?

Answer 1

How about this?

The grid has no fixed widths or heights and should accommodate whatever controls you add.

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

Initial window

Resized window

EDIT in response to comment

If you want a progressbar in the top panel, just use:

    <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

Do you need them to be DockPanels, or this is a fixed layout?

If it's fixed you could do something like this:

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

I made the area between your three panels re-sizable as your window resizes.

Instead of the listviews that I used, you can put pretty much anything, a user control, another grid, whatever.

The colors will show you where the listview sections are easily.

You will probably want to adjust the sizes, or change the resize behavior.

You can learn more about grids here

Answer 3

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