Question

What are various ways of doing alignment in WPF?

Answer 1

The FrameworkElement has two alignment properties: HorizontalAlignment and Vertical Alignment. The Horizontal Alignment property is a type of HorizontalAlignment enumeration and represents how a child element is positioned within a parent element horizontally.

 

The HorizontalAlignment enumeration has the four properties Left, Center, Right and Stretch. The Left, Center and Right properties sets a child element to left, center and right of the parent element. The Stretch property stretches a child element to fill the parent element's allocated layout space.

 

Example

1. <StackPanel Background="LightGray">  
2.     <Button Name="Rect1" Background="LightBlue" Width="150" Height="50" HorizontalAlignment="Left" Content="Left Aligned" />  
3.     <Button Name="Rect2" Background="LightGreen" Width="150" Height="50" HorizontalAlignment="Center" Content="Center Aligned" />  
4.     <Button Name="Rect3" Background="LightCyan" Width="150" Height="50" HorizontalAlignment="Right" Content="Right Aligned" />  
5.     <Button Name="Rect4" Background="LightPink" Height="50" HorizontalAlignment="Stretch" Content="Stretch Aligned" />   
6. </StackPanel>  

 

 

The VerticalAlignment property is a type of HorizontalAlignment enumeration and represents how a child element is positioned within a parent element vertically.

 

The VerticalAlignment enumeration has the four properties Top, Center, Bottom and Stretch. The Top, Center and Bottom properties set a child element to top, center or bottom of the parent element. The Stretch property stretches a child element to fill the parent element's allocated layout space vertically.

 

Example

1. <Grid>  
2.     <Grid.ColumnDefinitions>  
3.         <ColumnDefinition Width="100" />  
4.         <ColumnDefinition Width="100" />  
5.         <ColumnDefinition Width="100" />  
6.         <ColumnDefinition Width="100" />   
7.      </Grid.ColumnDefinitions>  
8.     <Button Name="Button1" Background="LightBlue" Height="30" Width="100" VerticalAlignment="Top" Content="Left Aligned" />  
9.     <Button Name="Button2" Background="LightGreen" Height="30" Width="100" Grid.Column="1" VerticalAlignment="Center" Content="Center Aligned" />  
10.     <Button Name="Button3" Background="LightCyan" VerticalAlignment="Bottom" Height="30" Width="100" Grid.Column="2" HorizontalAlignment="Left" Content="Right Aligned" />  
11.     <Button Name="Button4" Background="LightPink" Content="Stretch ligned" Width="100" Grid.Column="3" HorizontalAlignment="Stretch" />   
12. </Grid>