Step 2 of 3: Adding Transforms

In the previous step you created a new Windows Phone project and added a C1LayoutTransformer panel to the application. In this step you'll continue by adding controls with transforms.

Complete the following steps:

1.   In the XAML window of the project, place the cursor between the <Grid x:Name="ContentPanel"></Grid> tags and click once.

2.   Add the following markup between the <Grid x:Name="ContentPanel"></Grid> tags to add a C1LayoutTransformer control to the application:

<c1:C1LayoutTransformer >

    <c1:C1LayoutTransformer.LayoutTransform>

        <RotateTransform Angle="90"></RotateTransform>

    </c1:C1LayoutTransformer.LayoutTransform>

    <Button Background="DarkMagenta" Content="Rotate" Height="80" Width="180" HorizontalAlignment="Right" VerticalAlignment="Top"/>

</c1:C1LayoutTransformer>

Note that the C1LayoutTransformer  includes a RotateTransform that changes the apperance of the Button control that the C1LayoutTransformer contains. Note that the RotateTransform rotates the Button by 90 degrees.

3.   Add the following markup below the previous C1LayoutTransfomer markup and between the <Grid x:Name="ContentPanel"></Grid> tags to add an additional C1LayoutTransformer control to the application:

<c1:C1LayoutTransformer >

    <c1:C1LayoutTransformer.LayoutTransform>

        <ScaleTransform ScaleX="2" ScaleY="4"></ScaleTransform>

    </c1:C1LayoutTransformer.LayoutTransform>

    <Button Background="MediumVioletRed" Content="Scale" Height="80" Width="180" VerticalAlignment="Top" HorizontalAlignment="Right"/>

</c1:C1LayoutTransformer>

Note that the C1LayoutTransformer  includes a ScaleTransform that changes the appearance of the Button control that the C1LayoutTransformer contains. Note that the ScaleTransform scales the button to twice its initial width and four times its initial height.

4.   Add the following markup below the previous C1LayoutTransfomer markup and between the <Grid x:Name="ContentPanel"></Grid> tags to add an additional C1LayoutTransformer control to the application:

<c1:C1LayoutTransformer >

    <c1:C1LayoutTransformer.LayoutTransform>

        <SkewTransform AngleX="140" AngleY="140"></SkewTransform>

    </c1:C1LayoutTransformer.LayoutTransform>

    <Button Background="HotPink" Content="Skew" Height="80" Width="180" VerticalAlignment="Top" HorizontalAlignment="Left"/>

</c1:C1LayoutTransformer>

Note that the C1LayoutTransformer  includes a SkewTransform that changes the appearance of the Button control that the C1LayoutTransformer contains. Note that the SkewTransform skews the button to 140 degree angle both horizontally and vertically.

5.   Add the following markup below the previous C1LayoutTransfomer markup and between the <Grid x:Name="ContentPanel"></Grid> tags to add an additional C1LayoutTransformer control to the application:

<c1:C1LayoutTransformer >

    <c1:C1LayoutTransformer.LayoutTransform>

        <TranslateTransform X="50" Y="50"></TranslateTransform>

    </c1:C1LayoutTransformer.LayoutTransform>

    <Button Background="DarkOrchid" Content="Translate" Height="80" Width="180" VerticalAlignment="Center" HorizontalAlignment="Left"/>

</c1:C1LayoutTransformer>

Note that the C1LayoutTransformer  includes a TranslateTransform that changes the appearance of the Button control that the C1LayoutTransformer contains. Note that the TranslateTransform changes the location of the control along the X and Y axes.

6.   Add the following markup below the previous C1LayoutTransfomer markup and between the <Grid x:Name="ContentPanel"></Grid> tags to add an additional C1LayoutTransformer control to the application:

<c1:C1LayoutTransformer >

    <c1:C1LayoutTransformer.LayoutTransform>

        <MatrixTransform >

            <MatrixTransform.Matrix >

            <Matrix M11="-1" M12="1" M21="-1" M22="-2"/>

            </MatrixTransform.Matrix>

        </MatrixTransform>

    </c1:C1LayoutTransformer.LayoutTransform>

    <Button Background="MediumPurple" Content="Matrix" Height="80" Width="180" VerticalAlignment="Top" HorizontalAlignment="Right"/>

</c1:C1LayoutTransformer>

Note that the C1LayoutTransformer  includes a MaxtrixTransform that changes the appearance of the Button control that the C1LayoutTransformer contains. Note that the MatrixTransform represents a 3x3 affine transformation matrix used for transformations in 2-D space and so changes, stretches, and skews the appearance of the Button.

Your complete markup will appear like the following:

•      XAML Markup

You've successfully created a Windows Phone application and added C1LayoutTransformer and controls to the application. In the next step you'll view C1LayoutTransformer at run time.