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
- <StackPanel Background="LightGray">
- <Button Name="Rect1" Background="LightBlue" Width="150" Height="50" HorizontalAlignment="Left" Content="Left Aligned" />
- <Button Name="Rect2" Background="LightGreen" Width="150" Height="50" HorizontalAlignment="Center" Content="Center Aligned" />
- <Button Name="Rect3" Background="LightCyan" Width="150" Height="50" HorizontalAlignment="Right" Content="Right Aligned" />
- <Button Name="Rect4" Background="LightPink" Height="50" HorizontalAlignment="Stretch" Content="Stretch Aligned" />
- </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
- <Grid>
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="100" />
- <ColumnDefinition Width="100" />
- <ColumnDefinition Width="100" />
- <ColumnDefinition Width="100" />
- </Grid.ColumnDefinitions>
- <Button Name="Button1" Background="LightBlue" Height="30" Width="100" VerticalAlignment="Top" Content="Left Aligned" />
- <Button Name="Button2" Background="LightGreen" Height="30" Width="100" Grid.Column="1" VerticalAlignment="Center" Content="Center Aligned" />
- <Button Name="Button3" Background="LightCyan" VerticalAlignment="Bottom" Height="30" Width="100" Grid.Column="2" HorizontalAlignment="Left" Content="Right Aligned" />
- <Button Name="Button4" Background="LightPink" Content="Stretch ligned" Width="100" Grid.Column="3" HorizontalAlignment="Stretch" />
- </Grid>