Create a HUE color bar

Question

I'm creating a color picker and I am at a stage where I need to create a HUE color bar:

enter image description here

One way to create it would be through gradient stops in XAML. For example:

<Rectangle Width="50" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.5,0.025" EndPoint="0.5,1" >
            <GradientStop Color="#FFFF0000" />
            <GradientStop Color="#FEFFFF00" Offset="0.15" />
            <GradientStop Color="#FE00FF00" Offset="0.3" />
            <GradientStop Color="#FE00FFFF" Offset="0.45" />
            <GradientStop Color="#FE0000FF" Offset="0.6" />
            <GradientStop Color="#FEFF00FF" Offset="0.85" />
            <GradientStop Color="#FFFF0000" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

The above will generate:

HUE Bar

However, I am not sure whether the stops are correct.

Is there a convention on how to generate such a bar? Any advice would be highly appreciated.

Best Regards,

Casey

If you want exactly the same as some control in Expression Blend, you could also try using WPF Snoop. Blend is just a WPF application and the whole visual tree is accessible :) — iCollect.it Ltd, Sep 28 '11 at 15:36

iCollect.it Ltd · Accepted Answer · 2011-09-28T15:34:32.183

It looks like your 2nd last stop is at a different interval (+0.25) to the previous ones (+0.15). You basically want the same gap between all stops to get the same effect (that colour bar is just a linear distribution).

Try this instead:

<Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1.0" >
        <GradientStop Color="#FFFF0000" />
        <GradientStop Color="#FEFFFF00" Offset="0.167" />
        <GradientStop Color="#FE00FF00" Offset="0.333" />
        <GradientStop Color="#FE00FFFF" Offset="0.5" />
        <GradientStop Color="#FE0000FF" Offset="0.667" />
        <GradientStop Color="#FEFF00FF" Offset="0.833" />
        <GradientStop Color="#FFFF0000" Offset="1.0" />
    </LinearGradientBrush>
</Rectangle.Fill>

Which looks like:

enter image description here

Create a HUE color bar

1 Answers1

Try this instead:

Which looks like:

Linked