- 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:
In my cs code:
Please help me to show me the problem here. Thanks so much.
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.