在WPF中向鼠标旋转图形(如模拟转盘)

Question

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

基本上我想要的是一个"轮"UI控件(如模拟音量表盘).我希望能够单击并拖动拨盘,它将旋转以跟随鼠标.然后,当我释放鼠标时,它将停止跟随(显然!).

我该如何创建其中一个？一个人已经存在吗？

Answer 1

我没有看到这样的任何控件(尽管我看了WPF控件供应商提供的所有控件已经有一段时间了),但创建一个控件相对简单.

您所要做的就是创建一个包含图像(或XAML绘图)的自定义控件,您可以旋转它来跟随鼠标.然后,将RotateTransform绑定到自定义控件上的"角度"DependencyProperty,以便在更新"angle"时,图像/绘图旋转以匹配:

<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.由于我们正在显示的图像与此角度属性绑定,因此WPF会自动应用新值,这会导致旋钮与鼠标移动一起旋转.

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

<local:VolumeControl />

如果要将旋钮的值绑定到应用程序中的某些内容,可以将其绑定到VolumeControl上的Angle属性; 该值目前以度为单位,但可以添加一个额外的属性,以在度数角度和对您有意义的值(例如,0到10之间的值)之间进行转换.