WPF double gradient for color picker - wpf

Question

My goal is to implement a custom color picker. I don't want to use existing implementations such as the xceed one, among other reasons because I'm working in a RGBA FP32^4 space. I know that WPF works only in a int8^4 space for display, but the coordinates I'm working with are in FP32^4 space. It will interop with a DirectX12 asset with 10 bits display.
One thing I need is to implement the double gradient luminosity vs saturation graph, from the {Hue Saturation Luminosity} space.
I could not figure out how to to this with double gradients in a Rectangle; so I thought that one way to do this is to have a single gradient eg.,
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="{Binding HueColor}" Offset="1"/>
<GradientStop Color="#00000000" Offset="0"/>
</LinearGradientBrush>
</Rectangle.Fill>
then add an horizontal saturation gradient filter that would overlap.
Using an opacity mask is not helping here:
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="#00000000" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
I could not find a way to achieve this in WPF. I wanted to avoid using cuda or directx12, that would be kind of overkill, even though accurate.

Answer 1

I had to implement manually the bitmap creation with 2 classes.
public class HSLfloat
{
public float H { get; set; }
public float S { get; set; }
public float L { get; set; }
public HSLfloat(RGBAfloat rgbafloat)
{
var tol = 0.000001;
var rgb = rgbafloat.ToArrayRGB();
var rgbTuple = rgbafloat.ToArrayTuple();
var Cmax = rgb.Max();
var Cmin = rgb.Min();
var delta = Cmax - Cmin;
L = delta / 2;
var s = Math.Abs(delta) < tol ? 0 : delta / (1 - Math.Abs(2 * L - 1));
var CmaxName = rgbTuple.Where(o => Math.Abs(o.Item1 - Cmax) < tol).Select(o => o.Item2).First();
if (Math.Abs(delta) < tol)
H = 0;
else
{
switch (CmaxName)
{
case 'R':
H = 60 * ((rgbafloat.G - rgbafloat.B) / delta % 6);
break;
case 'G':
H = 60 * ((rgbafloat.B - rgbafloat.R) / delta + 2);
break;
case 'B':
H = 60 * ((rgbafloat.R - rgbafloat.G) / delta + 4);
break;
}
}
}
public HSLfloat(float h, float s, float l)
{
H = h;
S = s;
L = l;
}
public RGBAfloat ToRGBAfloat() => new RGBAfloat(this);
public (float H, float S, float L) ToTuple() => (H, S, L);
}
and for RGBA space:
public class RGBAfloat
{
public float R { get; set; }
public float G { get; set; }
public float B { get; set; }
public float A { get; set; }
public RGBAfloat()
{
}
public RGBAfloat(double r, double g, double b, double a = 1d)
{
R = (float)r;
G = (float)g;
B = (float)b;
A = (float)a;
}
public RGBAfloat(float r, float g, float b, float a= 1f)
{
R = r;
G = g;
B = b;
A = a;
}
public RGBAfloat(RGBAfloatStruct colorFloatStruct)
{
R = colorFloatStruct.R;
G = colorFloatStruct.G;
B = colorFloatStruct.B;
A = colorFloatStruct.A;
}
public RGBAfloat(HSLfloat hslfloat)
{
var c = (1 - Math.Abs(2 * hslfloat.L - 1)) * hslfloat.S;
var x = c * (1 - Math.Abs((hslfloat.H / 60) % 2 - 1));
var m = hslfloat.L - c / 2;
var quadrant = (int)(hslfloat.H % 360 / 60); // [0-5]
switch (quadrant)
{
default:
case 0:
R = c + m;
G = x + m;
B = 0f + m;
break;
case 1:
R = x + m;
G = c + m;
B = 0f + m;
break;
case 2:
R = 0f + m;
G = c + m;
B = x + m;
break;
case 3:
R = 0f + m;
G = x + m;
B = c + m;
break;
case 4:
R = x + m;
G = 0f + m;
B = c + m;
break;
case 5:
R = c + m;
G = 0f + m;
B = x + m;
break;
}
}
public RGBAfloatStruct ToRGBAFloatStruct() => new RGBAfloatStruct {A = A, R = R, G = G, B = B};
public float[] ToArrayRGB() => new[] {R, G, B};
public float[] ToArray() => new[] {R, G, B, A};
public (float,char)[] ToArrayTuple() => new[] { (R, 'R'), (G, 'G'), (B, 'B') };
public (float R, float G, float B) ToTupleRGB() => (R, G, B);
public (float R, float G, float B, float A) ToTuple() => (R, G, B, A);
public HSLfloat ToHSLfloat() => new HSLfloat(this);
public int ToRGBAint()
{
var rr = (int)(R * 255);
var gg = (int)(G * 255);
var bb = (int)(B * 255);
int color = rr << 16;
color |= gg << 8;
color |= bb << 0;
return color;
}
public WriteableBitmap ToWriteableBitmap(int size = 200)
{
var (h, s, l) = ToHSLfloat().ToTuple();
var writeableBitmap = new WriteableBitmap(size, size, 96, 96, PixelFormats.Bgr32, null);
for (int y = 0; y < size; y++)
for (int x = 0; x < size; x++)
{
s = (float)x / size;
l = (float)(size - y) / size;
var intColor = new HSLfloat(h, s, l).ToRGBAfloat().ToRGBAint();
unsafe
{
var ptr = writeableBitmap.BackBuffer;
ptr += y * writeableBitmap.BackBufferStride;
ptr += x * 4;
*((IntPtr*)ptr) = (IntPtr)intColor;
}
}
return writeableBitmap;
}
}
Result, SL map with (r,g,b)= (0.8, 0.5, 0.3):

Answer 2

Try using a visual brush. You can bind your F32 Hue color and use a converter to convert between color spaces (as you can see in line 11). You might even get rid of the visual brush and use the linear gradient and opacity mask directly in your rectangle, though I didn't try that myself.
<Rectangle Width="200" Height="200">
<Rectangle.Fill>
<VisualBrush TileMode="None">
<VisualBrush.Visual>
<Canvas Background="Black" Width="1" Height="1" SnapsToDevicePixels="True">
<Rectangle Width="1" Height="1" SnapsToDevicePixels="True">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="White" Offset="0" />
<GradientStop Color="{Binding HueColor, Converter={StaticResource color4Color}}" 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>
</Rectangle.Fill>
</Rectangle>