Multiple transform effects in WPF

Question

I need to apply multiple transform effect via c# in WPF.

I have tried code below but I see the last effect only and not the both together.

Any clue if it is possible to do?

XAML

<Grid>
   <Rectangle Fill="#FFF4F4F5" Name="rect" HorizontalAlignment="Left" Height="225" Margin="84,39,0,0" Stroke="Black" VerticalAlignment="Top" Width="299"/>
</Grid>

C#

SkewTransform skewTransform1 = new SkewTransform(45, 0, -50, 50);
rect.RenderTransform = skewTransform1;

RotateTransform rotateTransform  = new RotateTransform(30);
rect.RenderTransform = rotateTransform;

Solution 1

You have to combine both effects in a TransformGroup instead of overwriting them each time:

var transformGroup = new TransformGroup(); 
var skewTransform = new SkewTransform(45, 0, -50, 50); 
var rotateTransform = new RotateTransform(30); 

transformGroup.Children.Add(skewTransform); 
transformGroup.Children.Add(rotateTransform); 

rect.RenderTransform = transformGroup;

Solution 2

If you are not using a button or another mechanism to apply the transforms, you can define this solely in XAML

    <Rectangle Fill="#FFF4F4F5"
               Name="rect"
               HorizontalAlignment="Left"
               Height="225"
               Margin="84,39,0,0"
               Stroke="Black"
               VerticalAlignment="Top"
               Width="299">
        <Rectangle.RenderTransform>
            <TransformGroup>
                <SkewTransform AngleX="45"
                               AngleY="0"
                               CenterX="-50"
                               CenterY="50" />
                <RotateTransform Angle="30" />
            </TransformGroup>
        </Rectangle.RenderTransform>
    </Rectangle>

If you add a trigger section you can make it interactive.

    <Rectangle Fill="#FFF4F4F5"
               Name="rect"
               HorizontalAlignment="Left"
               Height="225"
               Margin="84,39,0,0"
               Stroke="Black"
               VerticalAlignment="Top"
               Width="299">
        <Rectangle.RenderTransform>
            <TransformGroup>
                <SkewTransform AngleX="45"
                               AngleY="0"
                               CenterX="-50"
                               CenterY="50" />
                <RotateTransform x:Name="RotateTransform"
                                 Angle="0" />
            </TransformGroup>
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.MouseDown">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="RotateTransform"
                                         Storyboard.TargetProperty="Angle"
                                         To="360"
                                         Duration="0:0:5"
                                         FillBehavior="Stop" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>

Comments

[NoWar]

Thanks for the XAML version!

[ywm]

Added an example of making the XAML react to user interaction.