• Welcome to the all-new Windows Central Forums! - We're still moving some things around, so you may see a few quirks here and there, but we're working on getting things fully completed as soon as possible. For now, take a look around, and if you run into any major issues, please let us know in this thread!

Rotation canvas in windows phone inverse 180 degrees before rotating correctily

Yang Kul

New member
Jan 9, 2014
4
0
0
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:
Code:
<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:

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.
 

Members online

Forum statistics

Threads
316,165
Messages
2,233,419
Members
427,366
Latest member
ypeit