CompositeTransform.xaml

<Page x:Class="transforms.CompositeTransform"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Loaded="Page_Loaded" Unloaded="Page_Unloaded"
    mc:Ignorable="d"
    d:DesignWidth="1366" d:DesignHeight="768">

    <!--Common resources for default dark theme applications-->
    <UserControl.Resources>
        <SolidColorBrush x:Key="PageBackgroundBrush" Color="White"/>
        <SolidColorBrush x:Key="PageForegroundBrush" Color="White"/>
        <SolidColorBrush x:Key="HighlightBrush" Color="#FF26A0DA"/>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="{StaticResource PageBackgroundBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="OrientationStates">
                <VisualState x:Name="Full"/>
                <VisualState x:Name="Fill"/>
                <VisualState x:Name="Portrait"/>
                <VisualState x:Name="Snapped"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <!-- <SnippetCompositeTransform> -->
        <StackPanel Margin="50">
            <Canvas Background="Black" Width="200" Height="200">
                <Rectangle Height="100" Width="100" Fill="Red">
                    <Rectangle.RenderTransform>

                        <!-- This one line of markup is the equivalent of the entire
                     TransformGroup block in the other Canvas below. -->
                        <CompositeTransform SkewX="30" Rotation="45" ScaleX="0.8" ScaleY="0.8" />
                    </Rectangle.RenderTransform>
                </Rectangle>
            </Canvas>

            <Canvas Margin="10" Background="Black" Width="200" Height="200">
                <Rectangle Height="100" Width="100" Fill="Red">
                    <Rectangle.RenderTransform>
                        <TransformGroup>

                            <!-- Note that you have to apply these transforms in 
                             a specific order to get the same effect as the
                             CompositeTransform. -->
                            <ScaleTransform ScaleX="0.8" ScaleY="0.8" />
                            <SkewTransform AngleX="30" />
                            <RotateTransform Angle="45" />
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>
            </Canvas>
        </StackPanel>
        <!-- </SnippetCompositeTransform> -->

    </Grid>
</Page>