Silverlight 4.0 使用鼠标移动事件旋转图像

我试图实现一个转盘式的风格，我发现很难用鼠标移动事件移动磁盘

这是我的xaml代码

<!-- Disk rotating code -->
        <StackPanel x:Name="disk" Margin="0,-60,0,0">
            <StackPanel.Resources>
                <Storyboard x:Name="myStoryboard">
                    <DoubleAnimation Storyboard.TargetName="myTransform" 
                                     Storyboard.TargetProperty="Angle" 
                                     From="0" To="360" Duration="0:0:5"
                                     RepeatBehavior="Forever"> 
                    </DoubleAnimation>
                </Storyboard>
            </StackPanel.Resources>
            <Rectangle x:Name="ttbg" Margin="5,200,30,0" Stroke="Black" StrokeThickness="0" RenderTransformOrigin="0.503,0.503" Height="420" Width="420" MouseLeftButtonDown="press_down" MouseLeftButtonUp="press_up" MouseMove="press_move" >
            <Rectangle.Fill>
                    <ImageBrush ImageSource="Images/ttbg.png" Stretch="Uniform" />
            </Rectangle.Fill>
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <RotateTransform x:Name="myTransform" />
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
        </StackPanel>

---

来自新手的问题这有点棘手，需要一些编码。但我会试试看

首先，我已经更改了您的XAML，因此我将使用一个而不是您使用的

StackPanel

。在这种情况下，我更喜欢

画布

，因为它允许我使用绝对坐标定位转台图像，以便我准确知道转台的中心位置。XAML现在看起来像这样：

<UserControl x:Class="TurnTable.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    >

    <Canvas x:Name="LayoutRoot" Background="White">
        <!-- Disk rotating code -->
        <Canvas.Resources>
            <Storyboard x:Name="myStoryboard">
                <DoubleAnimation x:Name="angleAnimation" Storyboard.TargetName="myTransform" 
                                     Storyboard.TargetProperty="Angle" 
                                     From="0" To="0" Duration="0:0:1"
                                     >
                    <DoubleAnimation.EasingFunction>
                        <CubicEase />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </Canvas.Resources>
        <Rectangle x:Name="ttbg" Canvas.Left="100" Canvas.Top="100" Stroke="Black" StrokeThickness="0" RenderTransformOrigin="0.5,0.5" Height="420" Width="420" MouseLeftButtonDown="press_down" MouseLeftButtonUp="press_up" MouseMove="press_move"  >
            <Rectangle.Fill>
                <ImageBrush ImageSource="Images/ttbg.png" Stretch="Uniform" />
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="myTransform" />
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>
</UserControl>

---

该代码允许您转动转盘，当按下鼠标时，将启动一个动画，以使转盘缓慢完全停止，从而给它一个很好的触感。

这有点棘手，需要一些编码。但我会试试看

首先，我已经更改了您的XAML，因此我将使用一个而不是您使用的

StackPanel

。在这种情况下，我更喜欢

画布

，因为它允许我使用绝对坐标定位转台图像，以便我准确知道转台的中心位置。XAML现在看起来像这样：

<UserControl x:Class="TurnTable.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    >

    <Canvas x:Name="LayoutRoot" Background="White">
        <!-- Disk rotating code -->
        <Canvas.Resources>
            <Storyboard x:Name="myStoryboard">
                <DoubleAnimation x:Name="angleAnimation" Storyboard.TargetName="myTransform" 
                                     Storyboard.TargetProperty="Angle" 
                                     From="0" To="0" Duration="0:0:1"
                                     >
                    <DoubleAnimation.EasingFunction>
                        <CubicEase />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </Canvas.Resources>
        <Rectangle x:Name="ttbg" Canvas.Left="100" Canvas.Top="100" Stroke="Black" StrokeThickness="0" RenderTransformOrigin="0.5,0.5" Height="420" Width="420" MouseLeftButtonDown="press_down" MouseLeftButtonUp="press_up" MouseMove="press_move"  >
            <Rectangle.Fill>
                <ImageBrush ImageSource="Images/ttbg.png" Stretch="Uniform" />
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="myTransform" />
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>
</UserControl>

---

代码允许您转动转盘，当按下鼠标时，将启动一个动画，使转盘慢慢完全停止，这给了它一个很好的触感。

感谢jakob的回复。尝试您的代码会给我一个angleAnimation错误。From=myTransform.Angle；angleAnimation.To=myTransform.Angle+_deltaAngle*100；当前上下文中不存在angleAnimation。如果查看我的XAML，您将看到angleAnimation是DoubleAnimation的名称。因此，您必须在XAML中定义angleAnimation。感谢jakob的回复。尝试您的代码会在angleAnimation上给我一个错误。From=myTransform.Angle；angleAnimation.To=myTransform.Angle+_deltaAngle*100；当前上下文中不存在angleAnimation。如果查看我的XAML，您将看到angleAnimation是DoubleAnimation的名称。因此，必须在XAML中定义angleAnimation。

namespace TurnTable
{
    public partial class MainPage : UserControl
    {
        Point _centerOfTurnTable;
        Point _startMousePosition;
        Point _lastMousePosition;
        bool _isMouseCaptured = false;
        double _deltaAngle;

        public MainPage()
        {
            InitializeComponent();
        }

        private void press_down(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            _centerOfTurnTable = new Point
            (
                Canvas.GetLeft(ttbg) + ttbg.ActualWidth / 2d,
                Canvas.GetTop(ttbg) + ttbg.ActualHeight / 2d
            );

            myStoryboard.Pause();

            _startMousePosition = e.GetPosition(this);
            _isMouseCaptured = true;
            _lastMousePosition = _startMousePosition;
        }

        private void press_up(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            if (_isMouseCaptured)
            {
                _isMouseCaptured = false;

                angleAnimation.From = myTransform.Angle;
                angleAnimation.To = myTransform.Angle + _deltaAngle * 100;
                _deltaAngle = 0;
                myStoryboard.Begin();
            }
        }

        private void press_move(object sender, System.Windows.Input.MouseEventArgs e)
        {
            Point currentMousePosition = e.GetPosition(this);
            if (_isMouseCaptured && Math.Abs(currentMousePosition.X - _centerOfTurnTable.X) > 5)
            {
                _deltaAngle = GetAngleDelta(currentMousePosition);

                myTransform.Angle += _deltaAngle;
                _lastMousePosition = currentMousePosition;
            }
        }

        private double GetAngleDelta(Point currentMousePosition)
        {
            double lastAngleDegrees = GetAngleDegrees(_lastMousePosition);
            double newAngleDegrees = GetAngleDegrees(currentMousePosition);

            if (Math.Sign(lastAngleDegrees) != Math.Sign(newAngleDegrees))
            {
                lastAngleDegrees = newAngleDegrees;
            }
            double delta = newAngleDegrees - lastAngleDegrees;
            return delta;
        }

        private double GetAngleDegrees(Point position)
        {
            return 180d / Math.PI * Math.Atan((position.Y - _centerOfTurnTable.Y) / (position.X - _centerOfTurnTable.X));
        }
    }
}