Create a wpf gradient brush editor. ( RGB color to HSL/HSV )

Question

I want to create a gradient brush editor like MSVS 2013 brush editor.

I used the following code to make my editor

 <VisualBrush x:Key="MyBrush" TileMode="None">
        <VisualBrush.Visual>
            <Canvas Background="Black" Width="1" Height="1" >
                <Rectangle Width="1" Height="1" >
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="White" Offset="0" />
                                <GradientStop Color="{Binding ElementName=picker,Path=SelectedColour}" Offset="1" />
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                    <Rectangle.OpacityMask>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                <GradientStop Color="#00FFFFFF" Offset="1"/>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Rectangle.OpacityMask>
                </Rectangle>
            </Canvas>
        </VisualBrush.Visual>
    </VisualBrush>

Please see the image below and answer to my question

UPDATE:

I realized that I should convert RGB to HSV.

RGB to HSV formula

The Y Axis is the brightness of the color, and the X axis is the saturation. You need to convert your RGB color to HSL (hue, saturation, lightness) and then use those values to plot (x,y). Refer here: http://www.niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl/ — Jon, Feb 12 '16 at 15:10
@Mangist Thank you , Please post your comment as answer and tell me how to get X and Y from HSL value. — Maria, Feb 12 '16 at 15:28

score 2 · Accepted Answer · answered Feb 12 '16 at 15:34

If you read the article I sent you, you'll see how to get the X (saturation %), and the Y (lightness %). They are expressed as percentages and you can plot that circle based on the width of your color box. So if the square is 200x200 pixels and your saturation is 45%, then you would plot X = 90. If the lightness was 60% then you would plot the Y = 120.

The XAML:

<Path Stroke="White" StrokeThickness="2" Fill="Red" >
    <Path.Data>
        <EllipseGeometry 
            Center="{Binding Path=CenterPoint}" 
            RadiusX="5" 
            RadiusY="10" />
    </Path.Data>
</Path>

The View Model:

public Point CenterPoint
{
  get { return new Point(Lightness, Saturation); }
}

You'll need to fill in the details to convert your RGB color to HSL.

aha ,Thank you very much! ( title of the question edited) – Maria Feb 12 '16 at 15:45 — Maria, Feb 12 '16 at 15:45

Create a wpf gradient brush editor. ( RGB color to HSL/HSV )

1 Answers1

Linked