c# - 在 WPF 中向鼠标方向旋转图形(如模拟表盘)

Question

在 WPF/C# 中，如何旋转“图形”以面向当前鼠标位置？

基本上我想要的是“滚轮”UI 控件(如模拟音量旋钮)。我希望能够单击并拖动转盘，它会随着鼠标旋转。然后，当我松开鼠标时，它将停止跟随(很明显!)。

我将如何创建其中之一？某个地方已经存在了吗？

Answer 1

我还没有看到任何这样的控件(虽然我已经有一段时间没有看过 WPF 控件供应商提供的所有控件了)，但是创建一个控件相对简单。

您所要做的就是创建一个包含图像(或 XAML 绘图)的自定义控件，您可以旋转该图像以跟随鼠标移动。然后，将 RotateTransform 绑定(bind)到自定义控件上的“角度”DependencyProperty，以便在更新“角度”时，图像/绘图旋转以匹配:

<UserControl x:Class="VolumeControlLibrary.VolumeControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:VolumeControlLibrary"
             Height="60" Width="60">
    <Image Source="/VolumeControl;component/knob.png" RenderTransformOrigin="0.5,0.5" >
        <Image.RenderTransform>
            <RotateTransform Angle="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:VolumeControl}}, Path=Angle}"/>
        </Image.RenderTransform>
    </Image>
</UserControl>

将 RenderTransformOrigin 设置为“0.5, 0.5”可确保控件围绕其中心旋转，而不是围绕左上角旋转；我们也必须在角度计算中对此进行补偿。

在控件的代码隐藏文件中，为鼠标和 Angle DependencyProperty 添加处理程序:

public partial class VolumeControl : UserControl
{
    // Using a DependencyProperty backing store for Angle.
    public static readonly DependencyProperty AngleProperty =
        DependencyProperty.Register("Angle", typeof(double), typeof(VolumeControl), new UIPropertyMetadata(0.0));

    public double Angle
    {
        get { return (double)GetValue(AngleProperty); }
        set { SetValue(AngleProperty, value); }
    }

    public VolumeControl()
    {
        InitializeComponent();
        this.MouseLeftButtonDown += new MouseButtonEventHandler(OnMouseLeftButtonDown);
        this.MouseUp += new MouseButtonEventHandler(OnMouseUp);
        this.MouseMove += new MouseEventHandler(OnMouseMove);
    }

    private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        Mouse.Capture(this);
    }

    private void OnMouseUp(object sender, MouseButtonEventArgs e)
    {
        Mouse.Capture(null);
    }

    private void OnMouseMove(object sender, MouseEventArgs e)
    {
        if (Mouse.Captured == this)
        {
            // Get the current mouse position relative to the volume control
            Point currentLocation = Mouse.GetPosition(this);

            // We want to rotate around the center of the knob, not the top corner
            Point knobCenter = new Point(this.ActualHeight / 2, this.ActualWidth / 2);

            // Calculate an angle
            double radians = Math.Atan((currentLocation.Y - knobCenter.Y) / 
                                       (currentLocation.X - knobCenter.X));
            this.Angle = radians * 180 / Math.PI;

            // Apply a 180 degree shift when X is negative so that we can rotate
            // all of the way around
            if (currentLocation.X - knobCenter.X < 0)
            {
                this.Angle += 180;
            }
        }
    }
}

捕获鼠标确保您的控件将继续获得鼠标更新，即使当用户鼠标离开控件时(直到他们松开点击)，并通过获取鼠标相对于当前元素的位置(控件)，无论控件在屏幕上的实际呈现位置如何，您的计算都应该始终相同。

在这个例子中，当鼠标移动时，我们计算它与控件中心之间的角度，然后将这个角度设置为我们创建的 Angle DependencyProperty。由于我们显示的图像绑定(bind)到此角度属性，WPF 会自动应用新值，这会导致旋钮随着鼠标移动而旋转。

在您的解决方案中使用控件很容易；只需添加:

<local:VolumeControl />

如果您想将旋钮的值绑定(bind)到应用程序中的某些内容，则可以绑定(bind)到 VolumeControl 的 Angle 属性；该值当前以度为单位，但可以添加一个附加属性以在以度为单位的角度和对您有意义的值(例如 0 - 10 之间的值)之间进行转换。