Multiple transform effects in WPF
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>
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;