Horizontal Gradient Colour Picker

I needed this week, a particular kind of colour picker.  I couldn’t find one so I made one.

I tried using a gradient background, but was unable to find a way to pick the tapped colour out of it, even though I could get the POINT co-ordinate.

Instead, I had to do it like this.

It isn’t a custom control, just a usercontrol so I can re-use it.

It’s a Image of the gradient, and in the background it holds the original image as a WriteableBitmapEX.

On the right is a grid with the background set to the colour selected.

On the Tap event I got the position of the tap along with the width of the visible image control (as it could stretch with the users screen).

Then I bilinear resize the background image to match the visible image and grab the pixel from the tap events position. Push it back into the property and ta-da!

It’s now getting some further work (stop the image from resampling resampling if the image hasn’t resized (speed and avoid loss of quality) and it would be great if it set the colour while holding so you could drag a finger/cursor and see the color change without lifting).  But this first iteration was interesting so I wanted to share.

I should note; this binds to a string property.

Leave a Reply

Your email address will not be published. Required fields are marked *