#760 – Horizontal and Vertical Alignment Basics

February 20, 2013 1 Comment

The general idea of the HorizontalAlignment and VerticalAlignment properties, for objects that inherit from FrameworkElement, is to indicate how the element is positioned within the space that the parent panel provides, after accounting for any margins.

Different values for HorizontalAlignment and VerticalAlignment only lead to different layout if the parent panel provides more room than the child element requires, in the corresponding dimension.

In the grid shown below:

  • Labels in the 1st row have HorizontalAlignment set to Left
  • Labels in 2nd row have HorizontalAlignment set to Center
  • Labels in 3rd row have HorizontalAlignment set to Stretch
  • 1st column width is set to Auto–make wide enough for largest item
  • 2nd column width takes up remaining space

760-001

Things to note:

  • Labels in 2nd column have more room, so horizontal alignment results in different behavior
  • 1st column sizes to fit 2nd row, so horizontal alignment doesn’t always apply
Advertisement

Filed under Layout Tagged with , , , ,

#411 – Use HorizontalAlignment and VerticalAlignment to Position Child Elements within a Grid

October 19, 2011 1 Comment

By default, the HorizontalAlignment and VerticalAlignment properties of child elements in a Grid are set to Stretch.  This value indicates that the child element should be sized to fit the containing cell. In the example below, the labels and the button are all stretched to fit the containing cells.

You can set the alignment properties to other values, however.  HorizontalAlignment can be set to Stretch, Left, Center or Right.  VerticalAlignment can be set to Stretch, Top, Center or Bottom.

        <Label Grid.Row="0" Grid.Column="0" Content="Larry" Margin="5" Background="Lavender" HorizontalAlignment="Center" />
        <Label Grid.Row="0" Grid.Column="1" Content="Moe" Margin="5" Background="Magenta" VerticalAlignment="Center" />


The “Larry” label is still stretched vertically, but now centered horizontally.  The size of the label is also adjusted to fit the content.  The “Moe” label is still stretched horizontally, but now centered vertically.

Filed under Layout Tagged with , , ,

#332 – HorizontalContentAlignment and VerticalContentAlignment Are Sometimes Not Relevant

June 30, 2011 Leave a comment

The HorizontalContentAlignment and VerticalContentAlignment properties, used to align a control’s content within the interior of the control, only make sense if the control is not automatically sizing to fit its content.

In the example below, all three buttons have their HorizontalContentAlignment property set to Right.  The first button has the default value for its HorizontalAlignment property (Stretch), so you can see the content of the button aligned to the right.  The other two buttons are not stretched, so their width is set to fit their content.  For these buttons, setting the HorizontalContentAlignment property doesn’t have any visible effect.

    <StackPanel>
        <Button Content="HorizontalAlignment=Stretch (Default)" HorizontalContentAlignment="Right"/>
        <Button Content="HorizontalAlignment=Left" HorizontalAlignment="Left" HorizontalContentAlignment="Right"/>
        <Button Content="HorizontalAlignment=Right" HorizontalAlignment="Right" HorizontalContentAlignment="Right"/>
    </StackPanel>

Filed under Layout Tagged with , , , , ,

#321 – HorizontalAlignment and VerticalAlignment

June 15, 2011 3 Comments

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

Filed under Layout Tagged with , , , ,