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>