HOW TO ALIGN DIFFERENT WAYS IN WPF?

HOW TO ALIGN DIFFERENT WAYS IN WPF?

GRID 

 In Grid alignment we divide the screen in to static rows and columns like HTML tables and position elements in those rows and column area.

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<Label Grid.Column="0" Grid.Row="0" Background="Red">1st column 1st row </Label>

<Label Grid.Column="1" Grid.Row="0" Background="LightGreen">2nd Column 2nd row</Label>

<Label Grid.Column="0" Grid.Row="1" Background="Red">1st column 2nd row</Label>

<Label Grid.Column="1" Grid.Row="1" Background="LightGreen">2nd Column 2nd row</Label>

</Grid>

STACK PANEL

Arranges control in vertical or horizontal format.

<StackPanel Orientation="Vertical">

      <Label Background="Red">Red </Label>

      <Label Background="LightGreen">Green </Label>

      <Label Background="LightBlue">Blue </Label>

      <Label Background="Yellow">Yellow </Label>

</StackPanel>

WRAP PANEL

Aligns elements in a line until the border is hit , then wraps in to the next line.

<WrapPanel Orientation="Horizontal">

<Label Width="125" Background="Red">Red 1</Label>

<Label Width="100" Background="LightGreen">Green 1</Label>

<Label Width="125" Background="LightBlue">Blue 1</Label>

<Label Width="50" Background="Yellow">Yellow 1</Label>

<Label Width="150" Background="Orange">Orange 1</Label>

<Label Width="100" Background="Red">Red 2</Label>

<Label Width="150" Background="LightGreen">Green 2</Label>

<Label Width="75" Background="LightBlue">Blue 2</Label>

</WrapPanel>

DOCK PANEL

 Aligns controls in five different regions: top, bottom, left, right and center.

<DockPanel>

<Label DockPanel.Dock="Top" Height="100" Background="Red">Top 1</Label>

<Label DockPanel.Dock="Left" Background="LightGreen">Left</Label>

<Label DockPanel.Dock="Right" Background="LightCyan">Right</Label>

<Label DockPanel.Dock="Bottom" Background="LightBlue">Bottom</Label>

<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"> Demo of Dock panel</TextBlock>

</DockPanel>

CANVAS

 Positions elements absolutely using co-ordinates.

<Canvas Margin="273,130,144,99">

<TextBlock> Canvas position </TextBlock>

</Canvas>