You can see this and other great articles here. The best practice of laying out the controls is to let WPF do the sizing for you as much as you can, so that other controls around it don't need to be resized when you make changes later. This is the concept of Layout by Content. Another example would be if you have Internationalization and the user can switch between different languages that have different lengths and you don't want to calculate the size needed for different languages. Although there will be situations when you need to set a specific size for a control (such as a setting the width of the comboBox wider when the length of all the items in it are too short to look nice), but for the most part letting WPF do the sizing will save you a lot of time.

If you let WPF do the sizing for you, WPF will determine the size of the controls by calculating the size of its children, then the size is allocated for the control. Shown below is a diagram on how the size is calculated for a particular Grid:

Using automatic sizing as suggested, the Grid will look at the size of its child controls and allocate the spaces needed for each row and column to fit all the child controls.

Let's see how we can apply the layout by content. Starting from scratch, we will:

1. Drop controls into a grid at the approximate positions, as shown below:

   

2. Insert the columns and the rows of the grid at the approximate positions by clicking on the blue outer edge of the grid:

   

3. Remove all formatting of the controls inside the grid by Reset Layout-->All. This will:
   • Set both the HorizontalAlignment and VerticalAlignment to Stretch
   • Remove all the margins
   • Set both the height and width of the controls to Auto and let WPF do the sizing of the controls for you

   

4. Ask the grid rows and columns to do automatic sizing. Click on the Auto button on the edge of the grid:

   

5. Adjust the control positions by using margins and dockings.
   • Setting the margins will set the spaces around the control.
   • Docking can be accomplished by setting the HorizontalAlignment and the VerticalAlignment properties or clicking on the small dots on the edge of the control.

   

Notice that the size of the grid columns and rows will adjust automatically based on the size of the child controls, and this is where the time saving comes in. You don't need to adjust the size of the columns and rows as the content inside the grid changes.

There will be times when you have the automatic sizing for the rows and columns of the grid, yet you need some of the columns(or rows) to have the same size. For example, you need to have column1 and column2 of a grid to be the same size. When the size of column1 changes due to its content, you need the size of column2 to automatically adjust to be the same size as column1 and vice versa. Furthermore, you may have multiple grids, and when the size of grid1 of columnX changes, you need the size of grid2 of columnY to be the same size as grid1 of columnX.

This can be accomplished by setting the SharedSizeGroup property of the grid column definition to be the same value, either within the same grid or across multiple grids. The requirement is to set the Grid.IsSharedSizeScope as True as the scope to apply the SharedSizeGroup.

Below shows the XAML of 2 grids with the same SharedSizeGroup, which will allocate the same size for the columns and rows based on the each other's content:

Below shows the columns and rows to be the same size based on each other's content:

Liked this article? You can see this and other great articles here.