#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

Filed under Layout Tagged with , , , , ,

#782 – A RenderTransform Has Better Performance than a LayoutTransform

March 22, 2013 2 Comments

When you transform a 2D element, you specify the desired transform as either a layout transform (transform calculated before layout phase) or a render transform (transform calculated before rendering the element).

A render transform has better performance than a layout transform.  This is especially apparent when you are animating a transform.  Whenever a layout transform changes, the panel containing the element that is being transformed needs to recalculate the layout of the children within the panel.  With a render transform, by contrast, the element only needs to be re-rendered.  Because of the additional layout step, a layout transform is more compute intensive than a render transform.

Because of the performance differences, you should use a render transform by default, unless you need the layout of the elements to change when the transform changes.

 

Filed under Layout Tagged with , , , ,

#770 – The Difference Between a LayoutTransform and a RenderTransform

March 6, 2013 4 Comments

When you are transforming user interface elements using a 2D transform, you can choose one of two types of transforms.

  • A LayoutTransform transforms elements before they are layed out by the parent panel
  • A RenderTransform transforms element after they are layed out by the parent panel (but before they are rendered)

Which one you use depends on whether you want transform and then lay out (use LayoutTransform) or to lay out and then transform (use RenderTransform).  (Note: You could also use both types).

    <StackPanel Orientation="Horizontal">
        <StackPanel Orientation="Vertical">
            <Label Content="LayoutTransform"/>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}"/>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}">
                <Button.LayoutTransform>
                    <RotateTransform Angle="20"/>
                </Button.LayoutTransform>
            </Button>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}">
                <Button.LayoutTransform>
                    <RotateTransform Angle="-20"/>
                </Button.LayoutTransform>
            </Button>
        </StackPanel>
        <StackPanel Orientation="Vertical">
            <Label Content="RenderTransform"/>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}"/>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}">
                <Button.RenderTransform>
                    <RotateTransform Angle="20"/>
                </Button.RenderTransform>
            </Button>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}">
                <Button.RenderTransform>
                    <RotateTransform Angle="-20"/>
                </Button.RenderTransform>
            </Button>
        </StackPanel>
    </StackPanel>

770-001

Filed under Layout Tagged with , , , ,

#569 – Setting Transforms from within Blend

May 30, 2012 Leave a comment

You can set both layout and render transforms for an UIElement from within Blend.

To configure a transform, just select the user interface element and then find the Transform area of the Properties panel.  You’ll see that you can set properties for both layout and render transforms.

You can configure a number of different transforms.

A Translation moves an element left/right or up/down.

A rotation transform rotates the element.

A scale transform scales the element.  You can change the element’s X and Y dimensions independently.

A skew transformation slants the element, relative to the X or Y dimension (or both).

You can change the centerpoint of the element, with respect to other translations that you apply.

You can also flip the control horizontally or vertically.

Filed under Blend Tagged with , , , ,

#479 – Using a Layout Transform on Child Elements in a Canvas

January 24, 2012 1 Comment

You can use a LayoutTransform on child elements of a Canvas to transform them graphically.  Specifically, you can use a RotateTransform, ScaleTransform or SkewTransform.  (Translation transforms are ignored).

    <Canvas>
        <Button Content="Hopalong Cassidy" Canvas.Left="10" Canvas.Top="10">
            <Button.LayoutTransform>
                <RotateTransform Angle="45"/>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Roy Rogers" Canvas.Right="10" Canvas.Top="10">
            <Button.LayoutTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="2.0"/>
                    <RotateTransform Angle="-45"/>
                </TransformGroup>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Spade Cooley" Canvas.Left="10" Canvas.Bottom="10">
            <Button.LayoutTransform>
                <SkewTransform AngleX="20"/>
            </Button.LayoutTransform>
        </Button>
    </Canvas>

Filed under Layout Tagged with , , , , , ,

#447 – You Can Use Layout Transforms Within a DockPanel

December 9, 2011 1 Comment

You can use a LayoutTransform on individual child elements in a DockPanel container to scale or rotate the elements.

In the example below, we have four Label controls, each docked to one side of a DockPanel.  The labels on the left, top and right sides use a LayoutTransform to make them face outwards.

<DockPanel LastChildFill="False">
    <Label Content="Facing Up" DockPanel.Dock="Top" Background="Aquamarine"
           HorizontalContentAlignment="Center">
        <Label.LayoutTransform>
            <RotateTransform Angle="180"/>
        </Label.LayoutTransform>
    </Label>

    <Label Content="Facing Down" DockPanel.Dock="Bottom" Background="LightSteelBlue"
           HorizontalContentAlignment="Center">
    </Label>

    <Label Content="Facing Left" DockPanel.Dock="Left" Background="DarkSeaGreen"
           HorizontalContentAlignment="Center">
        <Label.LayoutTransform>
            <RotateTransform Angle="90"/>
        </Label.LayoutTransform>
    </Label>

    <Label Content="Facing Right" DockPanel.Dock="Right" Background="SkyBlue"
           HorizontalContentAlignment="Center">
        <Label.LayoutTransform>
            <RotateTransform Angle="-90"/>
        </Label.LayoutTransform>
    </Label>
</DockPanel>

Filed under Layout Tagged with , , ,

#285 – Rotating an Image

April 25, 2011 2 Comments

You can rotate an Image control by assigning a rotation transform to its LayoutTransform property.

		<Image Source="TractorSm.png">
			<Image.LayoutTransform>
				<RotateTransform Angle="45"/>
			</Image.LayoutTransform>
		</Image>

Filed under Controls Tagged with , , , , ,