Introduction to WPF Panels
In this article we will provide the introduction to WPF panels like Grid Panel, Wrap Panel, Stack Panel, Dock Panel, Canvas Panel.
What is panels?
Panels are one of the most important control types of WPF. They act as containers for other controls and control the layout of your windows/pages. Since a window can only contain one child control, a panel is often used to divide up the space into areas, where each area can contain a control or another panel.
Type of WPF panels
- Grid Panel
- Wrap Panel
- Stack Panel
- Dock Panel
- Canvas Panel
Quick introduction to wpf panels
|Grid Panel||Arranges content within a series of cells, based on rows and columns, maintained within a tabular grid.|
|Wrap Panel||Positions content from left to right, breaking the content to the next line at the edge of the containing box.
Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property.
|Stack Panel||Stacks content in a vertical or horizontal manner as dictated by the Orientation property.|
|Dock Panel||Locks content to a specified side of the panel (Top, Bottom, Left, or Right).|
|Canvas Panel||Provides a ‘classic’ mode of content placement. Items stay exactly where you put them at design time as items make use of absolute positions.|
The Grid panel is probably the most complex of the panel types.
A Grid can contain multiple rows and columns. You define a height for each of the rows and a width for each of the columns, in either an absolute amount of pixels, in a percentage of the available space or as auto, where the row or column will automatically adjust its size depending on the content.
Use the Grid when the other panels doesn’t do the job, e.g. when you need multiple columns and often in combination with the other panels.
In a Wrap Panel the child elements are positioned sequentially, from left to right and top to bottom.
By default the layout orientation is horizontal and the controls flow left to right; depending on the screen size the control might wrap to the next line.
The Stack Panel acts much like the Wrap Panel, but instead of wrapping if the child controls take up too much room, it simply expands itself, if possible.
Just like with the Wrap Panel, the orientation can be either horizontal or vertical, but instead of adjusting the width or height of the child controls based on the largest item, each item is stretched to take up the full width or height.
Use the Stack Panel when you want a list of controls that takes up all the available room, without wrapping.
Dock Panel is a most useful layout panel in XAML, it arranges controls to the top, left, bottom, right and remaining space. A useful property is DockPanel.Dock Property that indicates where the element controls are docked.
The default is left. If we don’t set the dock property then it will be left.
Last child of the dock panel will fill up the remaining space of the window.
A simple panel, which allows you to assign specific coordinates to each of the child controls, giving you total control of the layout.
This is not very flexible though, because you have to manually move the child controls around and make sure that they align the way you want them to.
Use it (only) when you want complete control of the child control positions.