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:
- Drop controls into a grid at the approximate positions, as shown below:
- Insert the columns and the rows of the grid at the approximate positions by clicking on the blue outer edge of the grid:
- Remove all formatting of the controls inside the grid by Reset Layout-->All. This will:
- Set both the
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
- Ask the grid rows and columns to do automatic sizing. Click on the Auto button on the edge of the grid:
- 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
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
columnX changes, you need the size of
columnY to be the same size as
This can be accomplished by setting the
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
as the scope to apply the
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.