What are various ways of doing alignment in WPF?

Answer

There are five ways of doing alignment 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>

WrapPanel :-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>