#780 – Combining Transforms

When you apply a 2D transform to an element, you use the RenderTransform or LayoutTransform properties to specify the  transform to apply.  You set the value of these properties to a single instance of the Transform type.

Often, the value of the Transform type will be a specific transform, like ScaleTransform.  However, you can combine multiple transforms by setting the property to an instance of a TransformGroup, which in turn contains a collection of Transform elements.

In the example below, we first apply a rotate transform to the middle label, followed by a translation transform.

    <StackPanel>
        <Label Content="We few, we happy few, we band of brothers"
               Style="{StaticResource styRoyal}"/>
        <Label Content="For he to-day that sheds his blood with me"
               Style="{StaticResource styRoyal}">
            <Label.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="20" />
                    <TranslateTransform X="50" />
                </TransformGroup>
            </Label.RenderTransform>
        </Label>
        <Label Content="Shall be my brother; be he ne'er so vile"
               Style="{StaticResource styRoyal}"/>
    </StackPanel>

780-001

Advertisements

#779 – Animating a Rotation Transform

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

#778 – Animating a Scale Transform

Here’s another example of an animation of a 2D transform.  In this case, we animate the scale of the object so that it grows larger and smaller and then repeats the behavior.  This results in a sort of pulsating button.

    <Grid>
        <Button Content="Ship via Wells, Fargo &amp; Co." HorizontalAlignment="Center" VerticalAlignment="Center"
                Padding="20,10" FontSize="16"
                RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <ScaleTransform x:Name="scaleTransform" ScaleX="0.98" ScaleY="1.02"/>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="scaleTransform"
                                             Storyboard.TargetProperty="ScaleX"
                                             From="0.98" To="1.02" Duration="0:0:0.3"
                                             AutoReverse="True" RepeatBehavior="Forever"/>
                            <DoubleAnimation Storyboard.TargetName="scaleTransform"
                                             Storyboard.TargetProperty="ScaleY"
                                             From="0.98" To="1.02" Duration="0:0:0.3"
                                             AutoReverse="True" RepeatBehavior="Forever"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>

778-001

#777 – Animating a Transform

You can animate any of the 2D transforms applied to an element by using a Storyboard that contains an object that derives from AnimationTimeline.

In the example below, we use two DoubleAnimation objects to animate the X and properties of a TranslateTransform, so that the TextBlock wanders around the screen.

For the X property of the transform, we specify that we want it to vary from -100 to 100 and then back again, taking 0.7 seconds and then repeating the pattern forever.  We do something similar for Y, but using a different time period.

    <Grid>
        <TextBlock Text="We shall overcome" HorizontalAlignment="Center" VerticalAlignment="Center"
                   Padding="20,10" Background="PaleGoldenrod" FontSize="16">
            <TextBlock.RenderTransform>
                <TranslateTransform x:Name="transTransform" X="-100" Y="-80"/>
            </TextBlock.RenderTransform>
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="TextBlock.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="transTransform"
                                             Storyboard.TargetProperty="X"
                                             From="-100" To="100" Duration="0:0:0.7"
                                             AutoReverse="True" RepeatBehavior="Forever"/>
                            <DoubleAnimation Storyboard.TargetName="transTransform"
                                             Storyboard.TargetProperty="Y"
                                             From="-80" To="80" Duration="0:0:1.5"
                                             AutoReverse="True" RepeatBehavior="Forever"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
    </Grid>

777-001
777-002

#776 – Setting the Center Point for Skew Transforms

Like rotation transforms, you can set the origin for a skew transform using either the RenderTransformOrigin property on the element, or the CenterX/CenterY properties on the SkewTransform element.

You can think of the center of a skew transform as the point that will be held in one place as the object is tilted.

Also note–setting the X value of the center point only affects skews specified using AngleY and setting the Y value only affects skews specified using AngleX.

In the example below, we use RenderTransformOrigin to move the Y component of the center point, which impacts how the AngleX skew is done.

776-001

 

You can better see how this works by looking at how the Visual Studio designer shows you the skew.  It also shows the pre-transformed element, so you can see which point is being used as the origin.

776-002

 

776-003

#775 – Skew Transforms

You can use a skew transform to skew, or tilt, a user interface element in either the X or Y dimensions.  You specify skew values separately in both X and Y dimensions, expressed as an angle.

You specify a skew using a SkewTransform element, setting values for the AngleX and AngleY properties.  Both properties default to a value of 0.

Specifying a value for AngleX tilts an element’s vertical edges away from the Y axis.  Specifying a value for AngleY tilts an element’s horizontal edges away from the X axis.

Here’s an example:

        <TextBlock Text="No Skew" HorizontalAlignment="Left"
                   Padding="20,10" Background="PaleGoldenrod" Margin="10" FontSize="16" />

        <TextBlock Text="Skew, AngleX = 25" HorizontalAlignment="Left"
                   Padding="20,10" Background="PaleGoldenrod" Margin="10" FontSize="16" >
            <TextBlock.LayoutTransform>
                <SkewTransform  AngleX="25"/>
            </TextBlock.LayoutTransform>
        </TextBlock>

        <TextBlock Text="Skew, AngleY = 25" HorizontalAlignment="Left"
                   Padding="20,10" Background="PaleGoldenrod" Margin="10" FontSize="16" >
            <TextBlock.LayoutTransform>
                <SkewTransform  AngleY="25"/>
            </TextBlock.LayoutTransform>
        </TextBlock>

775-001

#774 – Translate Transforms

You can use a translation transform to translate, or move, a user interface element in the X or Y dimensions.  You specify translation values separately in both X and Y dimensions, expressed in device independent units.

You specify translation using a TranslateTransform element, setting values for the X and Y properties.  Both properties default to a value of 0.

LayoutTransform will ignore translation transforms (since the element will be moved around during the layout process anyway).  So you only use translation transforms with a RenderTransform.

Here’s an example that uses a couple of Sliders to dynamically change the X and Y values of a TranslateTransform.

    <StackPanel Orientation="Vertical">
        <TextBlock Text="Jack Kerouac" FontWeight="Bold" HorizontalAlignment="Center"
                   Padding="10,5" Background="PaleGoldenrod" Margin="5">
            <TextBlock.RenderTransform>
                <TranslateTransform  X="{Binding ElementName=sliX, Path=Value}" Y="{Binding ElementName=sliY, Path=Value}"/>
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock Text="Born 12 Mar, 1922" HorizontalAlignment="Center"
                   Padding="10,5" Background="Thistle"/>

        <Slider Name="sliX" Minimum="0" Maximum="300" Margin="10"/>
        <Slider Name="sliY" Minimum="0" Maximum="300" Margin="10"/>
    </StackPanel>

774-001
774-002
774-003