#321 – HorizontalAlignment and VerticalAlignment

The HorizontalAlignment and VerticalAlignment properties specify how child controls should be located and sized within their parent container.

By default, controls placed in a vertically oriented StackPanel are stretched horizontally to fill the width of the StackPanel.  The StackPanel container sizes its child elements this way because the children’s HorizontalAlignment property is set to Stretch by default.

We can override this behavior by setting HorizontalAlignment to Left, Center or Right.  The control will then be aligned as indicated and the width set to fit the content.

    <StackPanel >
        <Label Content="Gene Autry the singing cowboy" Background="Pink"/>
        <Button Content="I Like Gene" HorizontalAlignment="Center"/>
        <Label Content="Roy Rogers" Background="Aqua"/>
        <Button Content="I Like Roy Rogers Yes I Do" HorizontalAlignment="Right"/>
    </StackPanel>

The valid values for HorizontalAlignment are:

• Left
• Center
• Right
• Stretch – stretch to fill available width

The valid values for VerticalAlignment are:

• Top 
• Center
• Bottom
• Stretch – stretch to fill available height