如何实现CircularProgressBar黑色拖拽点的Slider式值调节功能？

已实现自定义CircularProgressBar的黑色指示点随Value值变化而移动，但无法通过拖拽该黑点反向修改Value值。现咨询：

1. 如何实现该黑点的拖拽功能？
2. 实现思路是什么？
3. 需要使用哪些方法？

实现思路 #

1. 拖拽状态管控：给指示点按钮绑定鼠标按下、移动、释放/离开事件，标记拖拽的开始与结束状态，确保仅在拖拽过程中响应鼠标移动。
2. 坐标与角度互转：将鼠标屏幕坐标转换为进度条圆形区域内的相对坐标，通过三角函数计算对应角度；同时完善转换器的反向转换逻辑，支持从坐标反推角度。
3. 值同步与边界限制：将计算出的角度转换为ProgressBar的Value值，限制值在Minimum和Maximum范围内，避免超出有效区间。

具体实现步骤 #

1. 修改模板中的指示点按钮 #

给按钮添加鼠标事件绑定，并命名方便后续操作：

<Button x:Name="IndicatorButton"
        MouseLeftButtonDown="IndicatorButton_MouseLeftButtonDown"
        MouseMove="IndicatorButton_MouseMove"
        MouseLeftButtonUp="IndicatorButton_MouseLeftButtonUp"
        MouseLeave="IndicatorButton_MouseLeftButtonUp">
    <!-- 原有Button模板内容保持不变 -->
</Button>

2. 完善AngleToPointConverter的反向转换 #

实现从坐标点到角度的反向计算：

public class AngleToPointConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        // 原有正向转换逻辑保持不变
        double angle = (double)value;
        double radius = 50;
        double piang = (angle - 143.2) * Math.PI / 180;

        double px = Math.Sin(piang) * radius + radius;
        double py = -Math.Cos(piang) * radius + radius;

        return new System.Windows.Point(px, py);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Point point = (Point)value;
        double radius = 50;
        // 计算相对于圆形中心(50,50)的坐标
        double dx = point.X - radius;
        double dy = point.Y - radius;

        // 通过反正切计算弧度，转换为角度并适配起始偏移
        double radians = Math.Atan2(dx, -dy);
        double angle = radians * 180 / Math.PI + 143.2;
        
        // 确保角度在0-360范围内循环
        if (angle < 0) angle += 360;
        if (angle > 360) angle -= 360;
        return angle;
    }
}

3. 修改CircularProgressBar类添加拖拽逻辑 #

添加拖拽状态标记和事件处理方法，实现值的实时更新：

public class CircularProgressBar : ProgressBar
{
    private bool _isDragging;

    public CircularProgressBar()
    {
        this.ValueChanged += CircularProgressBar_ValueChanged;
    }

    void CircularProgressBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        if (_isDragging) return; // 拖拽时跳过动画，避免冲突
        CircularProgressBar bar = sender as CircularProgressBar;
        double currentAngle = bar.Angle;
        double targetAngle = e.NewValue / bar.Maximum * 359.999;

        DoubleAnimation anim = new DoubleAnimation(currentAngle, targetAngle, TimeSpan.FromMilliseconds(500));
        bar.BeginAnimation(CircularProgressBar.AngleProperty, anim, HandoffBehavior.SnapshotAndReplace);
    }

    // 鼠标按下触发拖拽开始
    private void IndicatorButton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        _isDragging = true;
        ((Button)sender).CaptureMouse();
        UpdateValueFromMousePosition(e.GetPosition(this));
    }

    // 鼠标移动时更新Value
    private void IndicatorButton_MouseMove(object sender, MouseEventArgs e)
    {
        if (_isDragging)
        {
            UpdateValueFromMousePosition(e.GetPosition(this));
        }
    }

    // 鼠标释放/离开时结束拖拽
    private void IndicatorButton_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        _isDragging = false;
        ((Button)sender).ReleaseMouseCapture();
    }

    // 根据鼠标位置计算并更新Value
    private void UpdateValueFromMousePosition(Point mousePos)
    {
        var canvas = Template.FindName("RootCanvas", this) as Canvas;
        if (canvas == null) return;
        // 转换为Canvas内的相对坐标
        Point relativePos = canvas.TranslatePoint(mousePos, canvas);

        var converter = new AngleToPointConverter();
        double angle = (double)converter.ConvertBack(relativePos, typeof(double), null, System.Globalization.CultureInfo.CurrentCulture);

        // 将角度转换为Value值并限制边界
        double value = angle / 359.999 * Maximum;
        Value = Math.Clamp(value, Minimum, Maximum);
    }

    // 原有依赖属性保持不变
    public double Angle
    {
        get { return (double)GetValue(AngleProperty); }
        set { SetValue(AngleProperty, value); }
    }

    public static readonly DependencyProperty AngleProperty =
        DependencyProperty.Register("Angle", typeof(double), typeof(CircularProgressBar), new PropertyMetadata(0.0));

    public double StrokeThickness
    {
        get { return (double)GetValue(StrokeThicknessProperty); }
        set { SetValue(StrokeThicknessProperty, value); }
    }

    public static readonly DependencyProperty StrokeThicknessProperty =
        DependencyProperty.Register("StrokeThickness", typeof(double), typeof(CircularProgressBar), new PropertyMetadata(10.0));
}

4. 给模板根Canvas添加命名 #

在Style的ControlTemplate根Canvas添加名称，用于坐标转换：

<Canvas x:Name="RootCanvas" Width="100" Height="130">
    <!-- 原有Canvas内容保持不变 -->
</Canvas>

需要使用的方法/技术点 #

• 鼠标事件体系：MouseLeftButtonDown、MouseMove、MouseLeftButtonUp、MouseLeave，用于捕获拖拽生命周期。
• 鼠标捕获机制：CaptureMouse()、ReleaseMouseCapture()，确保拖拽过程中持续接收鼠标事件。
• 坐标转换方法：TranslatePoint()，实现不同容器间的坐标映射。
• 三角函数计算：Math.Atan2()，通过坐标计算对应的弧度与角度。
• 值边界限制：Math.Clamp()，确保Value值在有效区间内。
• 双向转换器：实现IValueConverter的ConvertBack方法，支持坐标到角度的反向转换。

内容的提问来源于stack exchange，提问作者wpf