如何自定义滑块控制，如wpf中的声音值

Question

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

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

Answer 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;
    }