Why layout is so important
Layout of controls is critical to an applications usability. Arranging controls based on fixed pixel coordinates may work for an limited enviroment, but as soon as you want to use it on different screen resolutions or with different font sizes it will fail. WPF provides a rich set built-in layout panels that help you to avoid the common pitfalls.
These are the five most popular layout panels of WPF:
- Avoid fixed positions – use the
Alignmentproperties in combination with
Marginto position elements in a panel
- Avoid fixed sizes – set the
Heightof elements to
- Don’t abuse the canvas panel to layout elements. Use it only for vector graphics.
- Use a StackPanel to layout buttons of a dialog
- Use a GridPanel to layout a static data entry form. Create a Auto sized column for the labels and a Star sized column for the TextBoxes.
- Use an ItemControl with a grid panel in a DataTemplate to layout dynamic key value lists. Use the SharedSize feature to synchronize the label widths.
Vertical and Horizontal Alignment
HorizontalAlignmant properties to dock the controls to one or multiple sides of the panel. The following illustrations show how the sizing behaves with the different combinations.
Margin and Padding
Padding properties can be used to reserve some space around of within the control.
Marginis the extra space around the control.
Paddingis extra space inside the control.
Paddingof an outer control is the
Marginof an inner control.
Height and Width
Alltough its not a recommended way, all controls provide a
Width property to give an element a fixed size. A better way is to use the
MaxWidth properties to define a acceptable range.
If you set the width or height to
Auto the control sizes itself to the size of the content.
Layout panels typically clip those parts of child elements that overlap the border of the panel. This behavior can be controlled by setting the
ClipToBounds property to true or false.
When the content is too big to fit the available size, you can wrap it into a
ScrollViewer. The ScrollViewer uses two scroll bars to choose the visible area.
The visibility of the scrollbars can be controlled by the vertical and horizontal
<ScrollViewer> <StackPanel> <Button Content="First Item" /> <Button Content="Second Item" /> <Button Content="Third Item" /> </StackPanel> </ScrollViewer>