如何自定义滑块控件，如 wpf 中的音量

Posted 2023-02-22

【中文标题】如何自定义滑块控件，如 wpf 中的音量

【英文标题】：How to custom slider control like sound volumn in wpf

【发布时间】：2017-02-16 03:50:00

【问题描述】：

我开始学习 Wpf，我想使用滑块，但我想自定义滑块控件，如下图所示：

滑块的值将是一些像图表一样高度增加的列，默认列背景颜色为黑色。当用户从左向右拖动和移动时，左侧的列背景将为绿色，相反，颜色将再次为黑色。如果我的问题不清楚，请告诉我。

【问题讨论】：

有人可以帮忙吗？

【参考方案1】：

我自己找到了解决方案。我有两个图像叠加在一起，绿色背景图像在底部，黑色背景图像在顶部。我有两个事件：图像上的 MouseMove 和 MouseDown 将获取鼠标的位置并设置顶部图像的不透明度蒙版。不透明蒙版会将图像的一部分设置为透明背景。当然，将显示底部图像。请参阅下面的代码。

    private void imgMusicBlack_MouseDown(object sender, MouseButtonEventArgs e)
    
        var img = sender as Image;
        SetOpacityMask(img, e.GetPosition(img).X);
    

    private void imgMusicBlack_PreviewMouseMove(object sender, MouseEventArgs e)
    
        if (e.LeftButton == MouseButtonState.Pressed)
        
            var img = sender as Image;
            SetOpacityMask(img, e.GetPosition(img).X);
                    
    

    private void SetOpacityMask(Image img, double pointX, double offset = -1)
    
        if (offset == -1)
            offset = Math.Round(pointX / img.ActualWidth, 2);


        LinearGradientBrush linear = new LinearGradientBrush();
        linear.StartPoint = new Point(0, 0.5);
        linear.EndPoint = new Point(1, 0.5);
        linear.GradientStops = new GradientStopCollection();
        linear.GradientStops.Add(new GradientStop(Colors.Transparent, offset));
        linear.GradientStops.Add(new GradientStop(Colors.Black, offset));

        img.OpacityMask = linear;