CODEWITHSUNDEEP
c#.netwpfxamllayout
Joan Venge
Joan Venge

Reputation: 330872

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

enter image description here

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?

Upvotes: 0

Views: 958

Answers (3)

grantnz
grantnz

Reputation: 7423

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

enter image description here

Resized window

enter image description here

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>

enter image description here

Upvotes: 3

Liz
Liz

Reputation: 8958

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

Upvotes: 2

Dan J
Dan J

Reputation: 16708

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

Upvotes: 1

Related Questions