WPF WrapPanel Layout Control

Wrap Panel

WrapPanel positions child elements in sequential position from left to right or top to bottom. Default positioning is left to right.

<WrapPanel>

        <Button Margin="4" Width="100">First</Button>

        <Button Margin="4" Width="100">Second</Button>

        <Button Margin="4" Width="100">Third</Button>

        <Button Margin="4" Width="100">Fourth</Button>

        <Button Margin="4" Width="160">Fifth</Button>

        <Button Margin="4" Width="160">Sixth</Button>

        <Button Margin="4" Width="200">Seventh</Button>

</WrapPanel>

If you want to position child controls to top to bottom, set WarpPanel Property  Orientation="Vertical"

Back to WPF Layout panels

WPF StackPanel Layout Control

StackPanel

StackPanel arranges its child controls in vertical or horizontal.  Default orientation is vertical.

<StackPanel>

        <TextBlock Background="LightBlue" FontSize="22">List of controls</TextBlock>

        <Button Margin="5" Height="30">Button </Button>

        <CheckBox Margin="3">First Checkbox</CheckBox>

        <CheckBox Margin="3">Second Checkbox</CheckBox>

        <TextBox Background="LightYellow"></TextBox>

 </StackPanel>

If you want to set child controls to horizontally, set StackPanel property Orientation="Horizontal".

Back to WPF Layout panels

WPF DockPanel Layout Control

DockPanel

DockPanel provides Docking support to its contained controls. It’s having Dock attached property.  Which you can set DockPanel contained controls to Left, Right, Bottom and Top. Last control is fills remaining place.

<DockPanel>

        <Button DockPanel.Dock="Bottom">Bottom</Button>

        <Button DockPanel.Dock="Left">Left</Button>

        <Button DockPanel.Dock="Right">Right</Button>      

        <Button DockPanel.Dock="Top">Top</Button>

        <Button>Button</Button>

</DockPanel>

In the above example shown child controls Dock position.

Back to WPF Layout panels

WPF Canvas layout panel

Canvas

Canvas provides absolute positioning to its contained controls. Canvas provides four properties to contained controls. Those are Canvas.Top, Canvas.Bottom, Canvas.Left and Canvas.Right.

  <Canvas Background="LightBlue">

        <TextBlock Canvas.Top="30" Canvas.Left="70">My first control</TextBlock>

        <TextBlock Canvas.Top="60" Canvas.Left="200">Other TextBlock control</TextBlock>

        <TextBox>Default location</TextBox>

        <TextBox Canvas.Top="140" Canvas.Left="100">Other textbox location</TextBox>

  </Canvas>

In above canvas example, added 4 controls and for few controls assigned attached property of canvas. If you not assigned attached property to contained controls, its default position is (0,0). i.e. Top and Left property value is 0.

Back to WPF Layout panels