XAML - Layouts


The layout of controls is very important and critical for application usability. It is required to arrange a group of GUI elements in your application. There are certain important points to consider while selecting layout panels;

  • Positions of the child elements.
  • Sizes of the child elements.
  • Layering of overlapping child elements on top of each other.

Fixed pixel arrangement of controls doesn’t work when an application has been used on different screen resolutions. XAML provides a rich set of built-in layout panels to arrange GUI elements in an appropriate way. Some of the most commonly used and popular layout panels are as follows −

Sr.No Panels & Description
1 StackPanel

Stack panel is a simple and useful layout panel in XAML. In a stack panel, child elements can be arranged in a single line, either horizontally or vertically, based on the orientation property.

2 WrapPanel

In WrapPanel, child elements are positioned in a sequential order from left to right or from top to bottom based on the orientation property.

3 DockPanel

DockPanel defines an area to arrange child elements relative to each other, either horizontally or vertically. With DockPanel, you can easily dock child elements to top, bottom, right, left, and center with Dock property.

4 CanvasPanel

Canvas panel is the basic layout panel in which child elements can be positioned explicitly using coordinates that are relative to the Canvas any side such as left, right, top, and bottom.

5 GridPanel

A Grid panel provides a flexible area which consists of rows and columns. In a Grid, child elements can be arranged in a tabular form.