How to create TableLayoutPanel in WPF?

Question

I worked with WinForms and there was an option to create TableLayoutPanel .

For example: I need that my window devided to two parts top and bottom, and I would like that top part take 70% of the window and bottom part 30% of the window...

Now, I am working with WPF and according to this

https://www.codeproject.com/Articles/30904/WPF-Layouts-A-Visual-Quick-Start

there are in WPF a lot of different layouts, but I did not find any that has the same bihaiour as TableLayoutPanel - that I can set how many rows I need and how much of the window should each row take.

How to do it?

Answer 1

To achieve the same behaviour as TableLayoutPanel you can use the Grid control in WPF, it allows you to define as much columns and rows as you need, XAML works very differently than WinForms when designing.

You can add them through the grid properties window under the layout section, specifically ColumnDefinitions and RowDefinitions.

As you begin adding rows, you will see that the width or height of the element is 1 unit of star (which is its default value), this is a special value that helps in distributing the width and height equally among all members of a RowDefinition or ColumnDefinition collection in the available space of a control. You can make a column or row take more available space by incrementing the value of stars the intended row is expected to take.

To give an example, if you have a grid with 3 columns and 2 rows, all with default values, you will have the following XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
</Grid>

And in the designer, you will see the following grid:

As you can see, all the available space is divided equally between all the columns horizontally and all the rows vertically, if you would like to have a column take more space, you could give it a value of 2 stars, and it will take the space that 2 stars should take.

In that case, the XAML will look like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
</Grid>

And your designer will look like this

There are more options for width values:

• Auto : This option will resize itself to fit its children dimensions.
• Pixel : This option will make the dimension take up as much pixels as specified (the real dimension can vary slightly, but that's out of scope of this answer)

Now, when you want to put elements inside the grid, you can do so in the designer, or in the xaml, the element that is placed in the first row and first column, will have no tags, but in case you want to put the elements in the second column of the second row, your XAML would look like the following;

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="1" Grid.Column="1">

    </TextBlock>
</Grid>

The values Grid.Row and Grid.Column specify in which column and row you want to place the element and are zero-based indexes.

I believe this pretty much sums up all you need to know to get started, WPF has a learning curve (which some say it is a wall) that once you learn it, developing UI becomes trivial, unlike winforms.