How to draw color wheel in WPF application?

Question

I started to play with WPF and wanted to draw color wheel on a form.

At first I tryed to use LinearGradientBrush on ArcSegment like this:

<Path StrokeThickness="35" Height="150" Width="150">
    <Path.Stroke>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="Red" Offset="0.15" />
            <GradientStop Color="Orange" Offset="0.2" />
            <GradientStop Color="Yellow" Offset="0.35" />
            <GradientStop Color="Green" Offset="0.5" />
            <GradientStop Color="Blue" Offset="0.65" />
            <GradientStop Color="Indigo" Offset="0.75" />
            <GradientStop Color="Violet" Offset="0.9" />
        </LinearGradientBrush>
    </Path.Stroke>
    <Path.Data>
        <PathGeometry >
            <PathFigure IsClosed="True" StartPoint="25,70">
                <ArcSegment Point="25,71" IsLargeArc="True"
                    Size="50,50" SweepDirection="Clockwise" />
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

Unsuccessfully, because gradient was still horizontal.

Another idea is what I have to bend line somehow after applying the gradient. But I can't find apropriate transform.

If there is no standard transform is it possible to make custom transform? Or should I draw color wheel by pixels?

Any ideas, please.

Answer 1

This library has pixel shaders that draw color wheels

Sample xaml:

<Ellipse Width="300"
         Height="300"
         Fill="White">
    <Ellipse.Effect>
        <effects:HsvWheelEffect />
    </Ellipse.Effect>
</Ellipse>

Note that the ellipse must have a brush set on Fill for this to work, can be any colour.

Answer 2

Here is yet another example from silverlight: http://asyrovprog.host22.com/colorwheel.html. Source code is located here: timeline.codeplex.com under bsd license.

Answer 3

What you're looking for is a Path Gradient Brush. Sadly, it's not yet available in WPF (but it is in GDI+). Perhaps in a future version...

I do have an idea on how to get an approximate color wheel.

A high level description of it would be using linear gradients (rectangles) that are rotated and translated to make a regular polygon whose thickness is much wider than the desired ring width. You then "cut out" a ring shape from this and use it as your color wheel.

A color wheel has several major colors (red, green, blue, yellow, etc). You will first need to define the degree measurement from some arbitrary base line. For example, red is at 0 radians, blue is at pi radians, etc. You also define an inner and outer radius for the ring. Using trig, you walk around the ring drawing rectangle with a linear gradient from the color you start on to the next adjacent color. The width of the rectangle will have to be larger than the width of the ring (you'll see why later) and the rectangle will need to be rotated to be tangent to the circle at its midpoint.

Once finished you will have a "color polygon" (a term I just made up). You then extract a ring shape from this polygon like a cookie cutter does with dough. There would be more than one way to do this. Simply drawing a filled circle from the center to the inner radius with the background will get rid on the middle part. The outer part would be more difficult. I don't know if you can do this in WPF but what you'd need to do is generate a mask that is a circle from the center to the outer edge of the ring. It would be a white circle on a black background. You then "AND" it with the image to get rid of the outside of the polygon.

Not perfect but it will look reasonable I suspect. Lots of trig!