如何顺利旋转uwp用户控件？

Question

I have created a user control having some textboxes, images, etc. Now I want to rotate that usercontrol with mouse. I have managed to rotate successfully, but it inverts during rotation, where am I doing mistake? Below is my xaml & code behind:

<UserControl...
    <Grid x:Name="ContainerGrid"
    Width="300" Height="400" RenderTransformOrigin="0.5,0.5"
    ManipulationMode="TranslateX,TranslateY,Rotate"
    ManipulationStarted="Manipulator_OnManipulationStarted"
    ManipulationDelta="Manipulator_OnManipulationDelta">

    <Grid.RenderTransform>
    <RotateTransform x:Name="RotateGrid" Angle="0"/>
    </Grid.RenderTransform>

    <!-- some elements -->
    <Rectangle x:Name="RotateRectangle"
    IsHitTestVisible="False"
    Width="16" Height="16"
    Fill="Red"
    VerticalAlignment="Top"
    HorizontalAlignment="Right" />
</Grid>


private void Manipulator_OnManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
    if (e.Position.X > ContainerGrid.Width - RotateRectangle.Width && 
    e.Position.Y < ContainerGrid.Height - RotateRectangle.Height)
    {
    _isRotating = true;
    lastPosition = e.Position;
    return;
    }

    _isRotating = false;
}


private void Manipulator_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{ 
    if (_isRotating)
    {
    Point currentLocation = e.Position;
    double radians = Math.Atan2((currentLocation.Y - lastPosition.Y),     (currentLocation.X - lastPosition.X));
    var angle = radians * 180 / Math.PI;
    RotateGrid.Angle = angle;
    lastPosition = currentLocation;
    }
}

Answer 1

Your question is confusing... you want to rotate the 2D object in the plane of the screen, right? (That's what I assumed from your transformation.) So why are you using both x and y mouse positions? Your rotation is a scalar value, so you should just be using 1-axis of your mouse movement.

If you instead want to rotate your object by having your mouse grab an imaginary ring around the object and rotate that... then you should instead be keeping a reference to your start position relative to the object's center or the starting angle of the mouse relative to the object's center. Something like this maybe:

private void Manipulator_OnManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
    if (e.Position.X > ContainerGrid.Width - RotateRectangle.Width && 
    e.Position.Y < ContainerGrid.Height - RotateRectangle.Height)
    {
    _isRotating = true;
    var startingRadians = Math.Atan2((currentLocation.Y - objectCenter.Y),     (currentLocation.X - objectCenter.X));
    startingAngle = startingRadians * 180 / Math.PI;
    return;
    }

    _isRotating = false;
}

private void Manipulator_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{ 
    if (_isRotating)
    {
    Point currentLocation = e.Position;
    double radians = Math.Atan2((currentLocation.Y - objectCenter.Y),     (currentLocation.X - objectCenter.X));
    var angle = radians * 180 / Math.PI;
    RotateGrid.Angle = angle-startingAngle;
    }
}