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

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

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

2 Responses to #1,041 – Stretched Child Elements Not Stretched when Rotated

  1. P.K. says:

    Looks stretched to me, how else would the item fit into the box with the given height or width?
    Make the box large enough to allow stretching without cropping, and it will work:

  2. P.K. says:

    Meh, code was not sumbitted… =(

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: