#1,041 – Stretched Child Elements Not Stretched when Rotated

April 1, 2014 2 Comments

A value of Stretch for HorizontalAlignment or VerticalAlignment means that a child control should be stretched to fill the available width (HorizontalAlignment) or height (VerticalAlignment).  This is the default setting for child elements in a StackPanel.

If a rotate or skew transform is being applied using a LayoutTransform, however, the element will only be stretched when the rotation or skew angle is a multiple of 90.

In the example below, notice that the middle button is initially stretched, but then is not stretched as soon as we start rotating it.  It is stretched again once we rotate it by 90 and 180 degrees.

    <StackPanel>
        <Slider Name="sliRotate" Margin="10,10,10,0"
                Minimum="0" Maximum="359"
                TickFrequency="1" IsSnapToTickEnabled="True"/>
        <Label Content="{Binding Path=Value, ElementName=sliRotate}"
               HorizontalAlignment="Center"
               Margin="0,0,0,10"/>
        
        <Button Content="Eat" Padding="0,5"/>
        <Button Content="Love" Padding="0,5">
            <Button.LayoutTransform>
                <RotateTransform Angle="{Binding Path=Value, ElementName=sliRotate}"/>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Pray" Padding="0,5"/>
    </StackPanel>

1041-001
1041-002
1041-003
1041-004
1041-005

Advertisement

Filed under Layout Tagged with , , , , ,

#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

Filed under Layout Tagged with , , , ,

#440 – How Alignment Properties Behave in a WrapPanel

November 30, 2011 2 Comments

The alignment properties, when specified for children of a WrapPanel, dictate the alignment within the current row (if Orientation is Horizontal) or column (if Orientation is Vertical).

For example, the VerticalAlignment properties of controls in a WrapPanel whose Orientation is Horizontal indicate the alignment of the control with respect to the other controls within the same row.

In the example below, the William II label is set artificially high, which then dictates the height of a row that it appears in.  Other controls on that same row will then align themselves relative to this height.

    <WrapPanel Orientation="Horizontal">
        <Label Background="AliceBlue" Content="William I" VerticalAlignment="Center"/>
        <Label Background="AntiqueWhite" Content="William II" VerticalAlignment="Center" Height="60"/>
        <Label Background="AliceBlue" Content="Henry I" VerticalAlignment="Bottom"/>
        <Label Background="AntiqueWhite" Content="Stephen" VerticalAlignment="Top"/>
        <Label Background="AliceBlue" Content="Matilda"  VerticalAlignment="Stretch"/>
        <Label Background="AntiqueWhite" Content="Henry II" VerticalAlignment="Center"/>
        <Label Background="AliceBlue" Content="Richard I" VerticalAlignment="Center"/>
        <Label Background="AntiqueWhite" Content="John" VerticalAlignment="Center"/>
    </WrapPanel>

Filed under Layout Tagged with , , ,

#421 – HorizontalAlignment, Margins and Column Widths in a Grid

November 2, 2011 1 Comment

When working with elements in a Grid, you use the row and column height/width, alignment properties and margins to determine the size and location of each element.  In certain cases, some of the properties might be ignored, depending on the value of other properties.

In the example below, the first two columns have their Width property set to Auto, so that they auto-size to their content.  The third and fourth columns use * sizing.  The 2nd and 4th columns specify a margin of 10 on both the left and right, while the 1st and 3rd use no margins.  Elements in the 1st row set HorizontalAlignment to Center, and Left, Right and Stretch for the following rows.

Notice the following:

  • HorizontalAlignment of Stretch is the same as Center for auto-sized columns
  • Margins don’t apply for *-sized columns when HorizontalAlignment is Center
  • Element are aligned within their margins

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 , , , ,

#280 – Alignment Properties for an Image

April 18, 2011 Leave a comment

If an Image control is not set to fill all of the available space, you can specify how it should be aligned horizontally and vertically within the available space.

In the example below, the Stretch property is set to Uniform, so we would normally have empty space on either side of the image when the window’s aspect ratio is greater than the aspect ratio of the image.  The Image control’s HorizontalAlignment is set to Center, by default, so there are white bars on both sides of the image.

	<Image Name="imgKlondike" Source="TractorSm.png"/>

If we want to left-align the image in the available space, we can set the HorizontalAlignment property to Left.

<Image Name="imgKlondike" Source="TractorSm.png" HorizontalAlignment="Left"/>

Filed under Controls Tagged with , , , ,