Tutorial by Examples

Canvas is the simplest of panels. It places items at the specified Top/Left coordinates. <Canvas> <TextBlock Canvas.Top="50" Canvas.Left="50" Text="This is located at 50, 50"/> <TextBlock Canvas.Top="100" Canv...

DockPanel aligns the control according to the dock property, in the order it's placed in the control. NOTE: DockPanel is part of the WPF framework, but does not come with Silverlight/WinRT/UWP. Open-source implementations are easy to find though. <DockPanel LastChildFill="False"> ...

StackPanel places its controls one after another. It acts like a dock panel with all of its control's docks set to the same value. <!-- The default StackPanel is oriented vertically, so the controls will be presented in order from top to bottom --> <StackPanel> <Button Content=&q...

Grid is used to create table layouts. Basic rows and columns definitions <Grid> <!-- Define 3 columns with width of 100 --> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="100"/> <ColumnDefi...

The wrap panel acts in a similar way to stack panel. Except when it recognizes the items will exceed it's size, it would then wrap them to a new row/column, depending on it's orientation. Horizontal orientation <WrapPanel Width="100"> <Button Content="Button"/&g...

Uniform grid will place all it's children in a grid layout, each child in it's own cell. All the cells will have the same size. It can be thought to be a shorthand to a grid where all the row and column definitions are set to * Default rows and columns By default the UniformGrid will try to crea...

RelativePanel has been introduced in Windows 10 and is used mainly to support adaptive layouts, where the child elements of the panel are laid out differently depending on available space. RelativePanel is typically used with visual states, which are used to switch the layout configuration, adaptin...