如何在WPF中自定义滑块控件（如音量）

Question

I am begin to study in Wpf, I want to use slider but I want to custom the slider control like image below:

The value of slider will be some of column with height increase like chart, and default column background color is black. When User drag and move from left to right, the column background of left side will be green color and opposite, the color will be black again. Please let me know if my question is not clear.

Answer 1

I found the solution by myself. I have two image stack up together, green background image is at bottom and black background image is at top. I have two event: MouseMove and MouseDown on image will get the position of mouse and set the opacity mask of top image. Opacity mask will set a part of image to transparent background. Of course, the bottom image will be display. See code below .

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