How to create this layout in WPF (3 controls)?

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 e开发者_如何学编程ach 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?

---

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>

---

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

---

Seems like this is the sort of scenario Alignment, Margins, and Padding are made to handle...