Defining visual presentation for spinning control

Now we are going to add code to MainPage.xaml to display a SpinningControl object. When you open the MainPage.xaml file, you will see the following XAML code created for you by Visual Studio:

<UserControl 
    x:Class="SpinningControlSample.MainPage"
    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"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:se="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:SpinningControlSample="clr-namespace:SpinningControlSample"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">

    </Grid>
</UserControl>

Let's modify this class to display our SpinningControl object as a rectangle rotated by an angle specified by its RotationAngle property:

<UserControl x:Class="SpinningControlSample.MainPage"
             ...
             d:DesignHeight="300"
             d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White"> 
        <!--Dependency Property RotationAngle is referred to within 
        XAML in exactly the same way as the usual 
         property (as in the line below)-->
        <SpinningControlSample:SpinningControl x:Name="TheSpinningControl" 
                                         RotationAngle="45">
            <SpinningControlSample:SpinningControl.Template>
                <!-- SpinningControl's template is set to create a visual
                        representation for the control. -->
            <ControlTemplate 
                   TargetType="SpinningControlSample:SpinningControl">
                    <Rectangle Fill="Orange" 
                               Width="100"
                               Height="30"
                               RenderTransformOrigin="0.5,0.5">
                     <Rectangle.RenderTransform>
                       <!-- We use "Binding" to connect 
                                 RotateTransform's Angle property 
                                 to the RotationAngle Dependency 
                                 Property. -->
                            <RotateTransform 
                                  Angle="{Binding 
                                             Path=RotationAngle, 
                                             Mode=OneWay,
                                             RelativeSource=
                                             {RelativeSource    
                                               Mode=TemplatedParent}}" />
                        </Rectangle.RenderTransform>
                    </Rectangle>
                </ControlTemplate>
            </SpinningControlSample:SpinningControl.Template>
        </SpinningControlSample:SpinningControl>
    </Grid>
</UserControl>

If you build and run the SpinningControlSample solution, you will get a 45 degree rotated orange rectangle displayed in a browser window as shown in the following screenshot:

Note that we defined the template for our lookless control inline (see the <SpinningControlSample:SpinningControl.Template> tag).