#790 – How a Rotation Transform Works

April 3, 2013 2 Comments

A 2D rotation transform in WPF is accomplished by using a transformation matrix.  The transformation matrix is multiplied by another matrix representing a single 2D point to be transformed.  The resulting matrix describes the transformed point.  When rotating a user interface element, this transformation is done individually on each point to generate the set of points representing the transformed element.

The transformation operation for rotation looks like:

790-001

Where ϴ represents the Angle property of the ScaleTransform, indicating the number of degrees to rotate the point in a clockwise direction.

This leads to the equations:

790-002

Advertisement

Filed under Layout Tagged with , , , ,

#779 – Animating a Rotation Transform

March 19, 2013 Leave a comment

Here’s one more example of an animation of a 2D transform.  In this case, we animate a rotation transform of an element so that the element continually spins around.

    <Grid>
        <Label Content="Gambling now legal in Nevada" Background="Plum"
               HorizontalAlignment="Center" VerticalAlignment="Center"
               Padding="20,10" FontSize="16"
               RenderTransformOrigin="0.5,0.5">
            <Label.RenderTransform>
                <RotateTransform x:Name="rotTransform" />
            </Label.RenderTransform>
            <Label.Triggers>
                <EventTrigger RoutedEvent="Label.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="rotTransform"
                                             Storyboard.TargetProperty="Angle"
                                             From="0" To="360" Duration="0:0:2.5"
                                             RepeatBehavior="Forever"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Label.Triggers>
        </Label>
    </Grid>

779-001
779-002

Filed under Animation Tagged with , , ,

#773 – A Rotation Center Point Can Be Outside an Element

March 11, 2013 Leave a comment

When you use the RenderTransformOrigin property of an element to specify the point of origin for all render transforms, you typically express X and Y as normalized coordinates.  X and Y both range from 0.0 to 1.0 as the position moves from one side of the element to the other.

You can also specify X and Y values that are less than 0.0 or greater than 1.0, indicating a point that is outside the element’s boundaries.  (Possibly quite distant from the element).

In the example below, the origin for a rotation transform is set to be off to the right of a Button.  The Slider allows you to try out different rotation angles at runtime.

    <StackPanel Orientation="Vertical">
        <Button Content="Push Me" HorizontalAlignment="Center" Padding="10,5" Margin="5"/>
        <Button Content="And Me" HorizontalAlignment="Center" Padding="10,5" Margin="5"
                RenderTransformOrigin="3.0,1.0" >
            <Button.RenderTransform>
                <RotateTransform Angle="{Binding ElementName=sliAngle, Path=Value}" />
            </Button.RenderTransform>
        </Button>
        <Slider Name="sliAngle" Minimum="-180"  Maximum="180" Value="-20" Margin="25,100"/>
    </StackPanel>

773-001
773-002

Filed under Layout Tagged with , , , ,

#772 – Use RenderTransformOrigin to Change Center Point for Rotation Transforms

March 8, 2013 Leave a comment

There are two methods for specifying the center point for a rotation transform.  You can either set the RenderTransformOrigin property for the element itself or you can set the CenterX and CenterY properties of the RotateTransform element.

Using RenderTransformOrigin is preferred, because you specify the center point using coordinates that are normalized against the rendered size of the element.  This is easier than having to know what the actual size of element is.  For example, you use (0.5, 0.5) to indicate that the rotation center is the center of the element.

The RenderTransformOrigin property will apply to all render transforms being applied to the element.  So if you have multiple transforms and want to specify an origin for only the rotation transform, you’ll need to use the CenterX/CenterY properties on the RotateTransform element.

        <Button Content="Push Me" HorizontalAlignment="Center"
                RenderTransformOrigin="0.5,0.5"
                Margin="30">
            <Button.RenderTransform>
                <RotateTransform Angle="45" />
            </Button.RenderTransform>
        </Button>

772-001

Filed under Layout 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 , , , , , ,

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