Layout is an important part of any GUI-based application, particularly for usability purposes. You must arrange your controls in a proper position, so that users find it easy to work with. You should also keep arranging your controls properly to scale them to different screen resolutions and/or different font sizes. WPF provides built-in support of various panels to help you with this:

• Grid: This defines a flexible area to position UI elements in rows and columns.
• StackPanel: This defines an area where the child elements can be arranged in a stacked manner, either horizontally or vertically.
• Canvas: This defines an area to position the UI elements by coordinates relative to the area specified.
• DockPanel: This defines an area that you can arrange horizontally or vertically, relative to each other.

• WrapPanel: This defines an area where child elements can position themselves sequentially, from left to right. When it reaches the edge of the panel box, it breaks to the next line.
• VirtualizingPanel: This defines the panel to virtualize the children's data.
• UniformGrid: This defines the panel to have a uniform cell size.

Each of the preceding panel elements derives from the Panel base and allows you to create a simple and better layout design for your app. You can set controls or child panels inside a panel to design your view.

Note that designing a layout is an intensive process and so, if you have a large collection of children, it will require a higher number of calculations to set the size and position of the elements. Therefore, the UI complexity will increase, impacting the performance of the application.

Whenever a child element changes its position, it automatically triggers the layout system to revalidate the UI and arranges the children according to the layout defined. The layout system does this in two phases. The Measure pass recalculates each member of the children collection with a call to the Measure method of the panel. This sets the height, width, and margin of the controls in the UI.

Then, the Arrange pass, which generally begins with a call to the Arrange method, generates the bounds of the child and passes them to the ArrangeCore method for processing. It then evaluates the desired size of the child and calls the ArrangeOverride method to determine the final size. Finally, it allocates the desired space and completes the process of layouting.

Here are some quick tips to remember:

• Canvas is a simple panel and has a better performance than a complex panel such as Grid.
• When using Canvas, avoid the fixed positioning of UI elements. Rather, align them with the margins and padding.
• Whenever possible, set the Height and Width properties to Auto instead of a fixed size.
• Avoid unnecessary calls to UpdateLayout as it forces a recursive layout update.
• Use StackPanel to lay out a list of elements horizontally or vertically.
• When working with a large children collection, consider using VirtualizingStackPanel.
• Use GridPanel to lay out static data in the UI.
• ItemControl can be used with a Grid panel in DataTemplate to lay out dynamic data.
• Use Margin to add extra space around the control.
• Use Padding to add extra space inside the control.

As you have already seen, there are many panels in WPF that can be used to create the UI layout. Let's now discuss each of them in detail. This will help you to decide which one to choose, when to choose them, and how to use them.