Rotation canvas in windows phone inverse 180 degrees before rotating correctily

[Yang Kul]

I have a canvas and I want it to rotate when I hold my finger on the screen. But when first moving,the canvas always inverse 180 degrees before follow my finger direction.Here is my code.
In my xaml page:

<Canvas Name="pnEditor" Visibility="Visible" Background="Transparent"  MouseLeftButtonUp="pnEditor_MouseLeftButtonUp" ManipulationDelta="PnEditor_OnManipulationDelta" ManipulationStarted="PnEditor_OnManipulationStarted" RenderTransformOrigin="0.5,0.5">
            <Canvas.RenderTransform>
                <CompositeTransform x:Name="CanvasRotation" Rotation="0"></CompositeTransform>
            </Canvas.RenderTransform>
        <Grid Background="Transparent" I****TestVisible="True" Width="{Binding ElementName=pnEditor, Path=ActualWidth}" Height="{Binding ElementName=pnEditor, Path=ActualHeight}" RenderTransformOrigin="0.499,0.47">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Tap">
                    <command:EventToCommand Command="{Binding ShowHidePanelCommand}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Grid>
        <Border Name="adornerControl" BorderBrush="Transparent" BorderThickness="1" Width="300" Height="100" Canvas.Left="91" Canvas.Top="263" MouseLeftButtonDown="adornerControl_MouseLeftButtonDown" Visibility="{Binding IsInEditMode, Converter={StaticResource stringToVisibilityConverter}}">
            <Grid>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="50"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="50"/>
                    </Grid.RowDefinitions>

                    <Rectangle Name="holderNorthWest" Fill="Transparent" Grid.Column="0" Grid.Row="0" MouseLeftButtonUp="HolderNorthWest_OnMouseLeftButtonUp"/>
                    <Rectangle Name="holderNorthEast" Fill="Transparent" Grid.Column="2" Grid.Row="0" MouseLeftButtonUp="HolderNorthEast_OnMouseLeftButtonUp"/>
                    <Rectangle Name="holderCenter" Fill="Transparent" Grid.Column="1" Grid.Row="1" MouseLeftButtonDown="holder_MouseLeftButtonDown"/>
                    <Rectangle Name="holderSouthWest" Fill="Transparent" Grid.Column="0" Grid.Row="2" MouseLeftButtonDown="holder_MouseLeftButtonDown" MouseLeftButtonUp="HolderSouthWest_OnMouseLeftButtonUp"/>
                    <Rectangle Name="holderSouthEast" Fill="Transparent" Grid.Column="2" Grid.Row="2" MouseLeftButtonDown="holder_MouseLeftButtonDown" MouseLeftButtonUp="HolderSouthEast_OnMouseLeftButtonUp"/>
                </Grid>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="50"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="50"/>
                    </Grid.RowDefinitions>

                    <Ellipse Fill="DeepSkyBlue" I****TestVisible="False" Width="15" Height="15" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <Ellipse Fill="DeepSkyBlue" I****TestVisible="False" Width="15" Height="15" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>

                    <Ellipse Fill="DeepSkyBlue" I****TestVisible="False" Width="15" Height="15" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <Ellipse Fill="DeepSkyBlue" I****TestVisible="False" Width="15" Height="15" Grid.Row="2" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>

            </Grid>
        </Border>
    </Canvas>

In my cs code:

private void PnEditor_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        if (mIsHolderPressed)
        {
            double deltaX = e.DeltaManipulation.Translation.X;
            double deltaY = e.DeltaManipulation.Translation.Y;

            if (mSelectedHolder == holderSouthWest)
            {
                try
                {
                    var ct = (CompositeTransform)pnEditor.RenderTransform;

                    ct.Rotation += deltaX;
                }
                catch (Exception ex)
                {
                }
            }
        }
    }

Please help me to show me the problem here. Thanks so much.