WPF Mousemove 明显滞后答案

【问题标题】：WPF Mousemove is a noticeable lagWPF Mousemove 明显滞后
【发布时间】：2023-01-29 21:36:29
【问题描述】：

我正在制作一个名为 VolumeScrollBar 的 UserControl 来控制我正在使用的视频播放器的音量。现在我遇到的问题是，当我滑动 SwitchPath 时，它的移动速度明显比我的鼠标慢。我怎样才能解决这个问题？

注意：一切正常，但速度。

另外，我没有使用内置的滑动条，因为我不喜欢它的外观。所以我在 Adobe Illustrator 中设计了自己的音量滚动条。

这是我的 XAML 代码：

<Canvas x:Name="VolumeScrollBarCanvas"  Height="21" Width="160" >
    <Path x:Name="Path_7" Width="15" Height="13" Canvas.Left="0.777" Canvas.Top="3.556" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 67.6183,648C 67.5503,648 67.4809,648.019 67.4156,648.061L 62.6556,651.173L 61.3916,652L 55.9996,652C 54.5276,652 53.3329,653.193 53.3329,654.667C 53.3329,656.14 54.5276,657.333 55.9996,657.333L 61.3916,657.333L 62.6556,658.16L 67.4156,661.272C 67.4809,661.315 67.5503,661.333 67.6183,661.333C 67.8169,661.333 67.9996,661.169 67.9996,660.937L 67.9996,654.667L 67.9996,648.395C 67.9996,648.164 67.8169,648 67.6183,648 Z M 66.6663,650.144L 66.6663,654.667L 66.6663,659.189L 63.3863,657.044L 62.1209,656.217L 61.7889,656L 61.3916,656L 55.9996,656C 55.2649,656 54.6663,655.401 54.6663,654.667C 54.6663,653.932 55.2649,653.333 55.9996,653.333L 61.3916,653.333L 61.7889,653.333L 62.1209,653.116L 63.3849,652.289L 66.6663,650.144 Z " HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Path x:Name="WhiteBarPath" Width="81" Height="7" Canvas.Left="46.111" Canvas.Top="6.223" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 176.667,657.333L 102,657.333C 100.167,657.333 98.6667,655.833 98.6667,654L 98.6667,654C 98.6667,652.167 100.167,650.667 102,650.667L 176.667,650.667C 178.5,650.667 180,652.167 180,654L 180,654C 180,655.833 178.5,657.333 176.667,657.333 Z " HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Path x:Name="Path_8" Width="13" Height="20" Canvas.Left="24.151" Canvas.Top="0.639" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 78.6667,645.333C 77.9893,645.333 77.3347,645.451 76.7067,645.648C 81.5307,646.025 85.3333,650.212 85.3333,655.333C 85.3333,660.455 81.5293,664.641 76.7067,665.019C 77.3347,665.216 77.9893,665.333 78.6667,665.333C 83.0853,665.333 89.3333,660.856 89.3333,655.333C 89.3333,649.811 83.0853,645.333 78.6667,645.333 Z " HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <Path x:Name="Path_9" Width="9.26" Height="15" Canvas.Left="19.168" Canvas.Top="3.556" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 73.1609,648C 72.6636,648 72.1849,648.085 71.7236,648.231C 75.2609,648.508 78.0503,651.579 78.0503,655.333C 78.0503,659.088 75.2609,662.159 71.7236,662.436C 72.1849,662.581 72.6636,662.667 73.1609,662.667C 76.4009,662.667 80.9836,659.384 80.9836,655.333C 80.9836,651.283 76.4009,648 73.1609,648 Z " HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Path x:Name="Path_10" Width="4" Height="5" Canvas.Left="18.11" Canvas.Top="8.266" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 72.4039,652.71C 72.2399,652.71 70.9452,652.756 70.6665,652.81L 70.6665,657.311C 71.0052,657.364 72.3412,657.306 72.4039,657.306C 73.6732,657.306 74.7012,656.276 74.7012,655.007C 74.7012,653.739 73.6732,652.71 72.4039,652.71 Z " HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Path x:Name="ColorBarPath" Width="81" Height="7" Canvas.Left="46.111" Canvas.Top="6.223" Stretch="Fill" Fill="#FF6557FF" Data="F1 M 176.667,657.333L 102,657.333C 100.167,657.333 98.6667,655.833 98.6667,654L 98.6667,654C 98.6667,652.167 100.167,650.667 102,650.667L 176.667,650.667C 178.5,650.667 180,652.167 180,654L 180,654C 180,655.833 178.5,657.333 176.667,657.333 Z " HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Ellipse x:Name="SwitchPath"    MouseDown="SwitchPath_MouseDown"  MouseMove="SwitchPath_MouseMove"  Mouse.MouseUp="SwitchPath_MouseUp"  Width="19" Height="19" Canvas.Left="115.444" Canvas.Top="0.889" Stretch="Fill" Fill="#FFFFFFFF" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Path x:Name="Path_7_Copy" Width="15" Height="13" Canvas.Left="0.777" Canvas.Top="3.556" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 67.6183,648C 67.5503,648 67.4809,648.019 67.4156,648.061L 62.6556,651.173L 61.3916,652L 55.9996,652C 54.5276,652 53.3329,653.193 53.3329,654.667C 53.3329,656.14 54.5276,657.333 55.9996,657.333L 61.3916,657.333L 62.6556,658.16L 67.4156,661.272C 67.4809,661.315 67.5503,661.333 67.6183,661.333C 67.8169,661.333 67.9996,661.169 67.9996,660.937L 67.9996,654.667L 67.9996,648.395C 67.9996,648.164 67.8169,648 67.6183,648 Z M 66.6663,650.144L 66.6663,654.667L 66.6663,659.189L 63.3863,657.044L 62.1209,656.217L 61.7889,656L 61.3916,656L 55.9996,656C 55.2649,656 54.6663,655.401 54.6663,654.667C 54.6663,653.932 55.2649,653.333 55.9996,653.333L 61.3916,653.333L 61.7889,653.333L 62.1209,653.116L 63.3849,652.289L 66.6663,650.144 Z " HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Path x:Name="Path_6" Width="13" Height="12" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 61.5899,656.667L 56.0005,656.667C 54.8965,656.667 54.0005,655.769 54.0005,654.667C 54.0005,653.564 54.8965,652.667 56.0005,652.667L 61.5899,652.667L 67.3339,648.912L 67.3339,660.421L 61.5899,656.667 Z " HorizontalAlignment="Left" VerticalAlignment="Top" Canvas.Left="1.777" Canvas.Top="4.056"/>
    <TextBlock  x:Name="Displaytxb"  Height="18" Canvas.Left="136.069" TextWrapping="Wrap" Text="100" Canvas.Top="1.917" Width="23" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="White"/>

</Canvas>

这是我的代码：

    private void ChangeTheVolume(double newVolume)
    {
        if (newVolume < 0 || newVolume > 100) return;

        newVolume = Math.Round(newVolume);
        double tempVolume = (ValumeMaxHigh * newVolume);
        ColorBarPath.Width = tempVolume;

        double pointX = (LocationMaxHigh * newVolume) + 46.11;
        Canvas.SetLeft(SwitchPath, pointX); // set the left position of rectangle to mouse X
        Displaytxb.Text = Convert.ToString(newVolume);

        VolumeOut = Volume;
    }
private void SwitchPath_MouseDown(object sender, MouseButtonEventArgs e)
    {
        Cursor = Cursors.Hand;
        _handToolMove = true;
        SwitchPath.CaptureMouse();
        _startPoint = e.GetPosition(VolumeScrollBarCanvas);
        double mouseCurrentLocation =  Canvas.GetLeft(SwitchPath);
        _mouseDownForHandToolOffSetX = _startPoint.X - mouseCurrentLocation;
    }

    private void SwitchPath_MouseMove(object sender, MouseEventArgs e)
    {
        if (_handToolMove)
        {
            Point v = e.GetPosition(VolumeScrollBarCanvas);
            Volume = 0.6933 * v.X + 1.24946035807;
        }

    }

    private void SwitchPath_MouseUp(object sender, MouseButtonEventArgs e)
    {
        if (_handToolMove)
        {
            Point v = e.GetPosition(VolumeScrollBarCanvas);
            Volume = 0.6933 * v.X + 1.25;
            SwitchPath.ReleaseMouseCapture();
            _handToolMove = false;
            Cursor = Cursors.Hand;
        }
       
       
    }
}
    public VolumeScrollBar()
    {
        RenderOptions.ProcessRenderMode = RenderMode.SoftwareOnly;
        InitializeComponent();
      
    }

【问题讨论】：

在 WPF 中，如果您不喜欢外观但想要功能，您可以将自己的 ControlTemplate 提供给现有控件。
您应该重新模板化滑块而不是从头开始构建控件。这是一个重新模板化的滑块。 i.imgur.com/6CsDUhN.png
我同意您将更轻松地重新制作 Slider 模板，但我会给您带来疑问的好处，并假设您想要学会以困难的方式去做。 :) 那就是说，我认为问题不在于渲染速度，而在于基于鼠标计算新位置的数学运算。你在那里硬编码了很多数字，我不清楚你为什么要按照你现在的方式计算滑块位置。如果您想发布一个完整的可重现示例，以便我们可以看到您所看到的内容，我们也许可以引导您正确。
@Peter Moore 我使用的数学是 y=mx+b。条形开始于 x = 46.11，条形结束于 x = 115.44
Mkay，好吧，尽我所能告诉您为 Canvas.Left 计算的移动量与鼠标移动量不是 1:1。换句话说，它正在缩放。据我所知，这就是为什么它看起来很慢。

标签： c# wpf

【解决方案1】：

这种缓慢的响应也可能发生在普通的 Slider 上。如果是这种情况，我建议使用“延迟”来绑定滑块。在您的情况下，我们应该做类似的事情：所有鼠标事件都应该将鼠标指向某个地方，没有逻辑也没有渲染。同时，创建一个每 10 毫秒（大约 ..）发生一次的计时器事件，并在那里进行更改。这样您就可以提高系统响应能力。

【讨论】：