WPF Control Library--clone Chrome's ColorPicker

First, observe

　　A new requirement in the project, you need to add a color picker control to the control library, because the company has not yet UI design big guy Check in, so start looking for all kinds of colorpicker from the internet, look for me to see the Google Browser comes with, it long this kind:

It looks good, you can do it! You have to look at some of the holes that might be in there. For WPF, the effects such as rounded shadows are basic operations, and this is not the point.

First we notice that there are two drag bars, one background is the visible spectrum and the other is the overlay of the color gradient and the block tile. Because there is no screen color function in the demand, so the pick icon on the left side of the drag bar can be removed, leaving only the current color preview, so that there will be a larger space, you can consider the circular Color preview area to the rectangle with rounded corners. And the top of the color pickup area is more complex, it is actually three layers of paint brush overlay, the first layer is the main color magenta, the second layer is white to transparent left and right gradient, the third layer is transparent to black up and down gradient. Because WPF's color gradient with transparent channels is not standard, for example, suppose there is a transparent to black upper and lower gradient layer, below the gradient layer is a solid red background, then the theoretical gradient starts the color is #FFFF0000, the color of the end of the gradient is # FF000000, the color in the upper and lower half should be #FF7F0000(or #ff800000, which is simply added divided by 2), but not in WPF (in professional image processing software such as PS is true # ff7f0000), if you don't believe us, we'll do an experiment now.

Second, the experiment

Open Blend, create a new WPF project, set the window size to 400*300, to conveniently locate the center point, we need to set allowstransparency= "True" , windowstyle= "None" , then the main window background is changed to pure red, and then add a layer from transparent to black up and down the gradient layer, with border implementation, such as:

　　

We use the ruler to locate the center point (200,150), such as:

　　

Let's see what the color is at the center point, and the color from blend is as follows:

　　

Here we reproduce the above operation in PS, to see what the final color will be, open PS new 400*300, the resolution of 72 of the canvas:

　　

Create a new solid red fill layer and a transparent to black upper and lower gradient layer, and then use the ruler to locate the center point:

　　

The final colors are as follows:

　　

Who do we trust? Of course is PS, after all, people are image processing trained, so we just use PS to make a transparent to black gradient png is OK.

Third, drag the bar background

I have an obsessive-compulsive disorder, which is the ability to use PNG without PNG, unless it is a last resort, such as the color error problem in the previous section. So let's talk about the background of the two drag bars. The first is the spectral, simple observation is actually the color gradient, but the inside of the gradientstop is more, the spectral XAML code is as follows:

1 <LinearGradientBrushx:key= "Colorpickerrainbowbrush"StartPoint= "0,1">2         <GradientStopColor= "#ff0000"/>3         <GradientStopColor= "#ff00ff"Offset= "0.167"/>4         <GradientStopColor= "#0000ff"Offset= "0.334"/>5         <GradientStopColor= "#00ffff"Offset= "0.501"/>6         <GradientStopColor= "#00ff00"Offset= "0.668"/>7         <GradientStopColor= "#ffff00"Offset= "0.835"/>8         <GradientStopColor= "#ff0000"Offset= "1"/>9     </LinearGradientBrush>

The second background is also very simple, is the ordinary DrawingBrush , but probably not many people touch it, simply speaking when setting the property tilemode= "Tile" , it will use the unit brush we provide to tile the entire canvas, Looking at Google's ColorPicker, we found that the unit brush here is a deep and shallow two blocks, and a less obvious split line, so the final code is as follows:

1 <DrawingBrushx:key= "Colorpickeropacitybrush"Viewport= "0,0,12,11"viewportunits= "Absolute"Stretch= "None"Tilemode= "Tile">2         <drawingbrush.drawing>3             <DrawingGroup>4                 <geometrydrawingBrush= "#d0cec7">5                     <Geometrydrawing.geometry>6                         <GeometryGroup>7                             <RectangleGeometryRect= "0,0,6,5" />8                             <RectangleGeometryRect= "6,6,6,5" />9                         </GeometryGroup>Ten                     </Geometrydrawing.geometry> One                 </geometrydrawing> A                 <geometrydrawingBrush= "#e7e7e2"> -                     <Geometrydrawing.geometry> -                         <RectangleGeometryRect= "0,5,12,1" /> the                     </Geometrydrawing.geometry> -                 </geometrydrawing> -             </DrawingGroup> -         </drawingbrush.drawing> +     </DrawingBrush>

As for the style of the drag bar I will not post it because of the limited space.

Third, the algorithm

1. Conversion of color into the system

Because of the 16-and 10-binary conversions involved in color, it is necessary to write a simple algorithm for processing. Color 16-in-turn 10-in. NET has been encapsulated in the type colorconverter , as long as the static method convertfromstring Pass in a color string, and then convert the return value to Color enables the functionality we want. And from 10 to 16 into the system is too simple, Microsoft disdain to do, that can only we go to realize, as long as a line of code: $"#{color. A:x2}{color. R:x2}{color. G:x2}{color. B:X2}" . It is important to note that in WPF it is best to make the data transformation involving the UI into a converter for use in XAML.

2, according to the position of the drag bar in the spectrum, change the top color pickup area of the main tone

The algorithm uses a GIF to simply explain:

　　

In order to implement this algorithm we need to figure out the color distribution of the spectrum, because the brush has been previously applied to the spectrum, so we can add a note to it:

　　

　　For example, I divide the spectrum into 6 pieces, the number is a total of 7 vertical lines, they correspond to the spectral brush 7 gradientstop , now we know the position of the drag bar and the corresponding color at 7 nodes, it is very easy to find the color of the position of the drag bar, because the drag bar is a Slider Control, we can set its maximum value to 6 maximum= "6" , and from its onvaluechanged event to learn where it is at this time, Assuming a value of 1.75 at this point, it is equivalent to falling in the box numbered 1, and it is at 3/4 positions. How do you calculate the color here? Because the color of the split line numbered 0 and number 1 (second root on the left) is exactly the value of the second gradientstop #ff00ff (we use Color1 instead), and because the third GradientStop The value is #0000ff (we replace it with Color2), so the color at the 3/4 position should be (Color1-(COLOR1-COLOR2) * 3/4), at which point the algorithm appears to be complete, But Google has one more step on that basis, see the last section for details .

3, according to the main tone to change the position of the drag bar on the spectrum

Yes, this algorithm is a 2 inverse process. Under what circumstances will it be used? Let's take a look at GIF:

　　

　Since it is the inverse process, we have to think in turn and focus on the color. This time we are going to analyze the spectral 10 code, we already know that the spectrum is split into 6 color gradient regions by 7 nodes, and that's what the code says:

　　

A little observation reveals that each color ramp changes only one of the three-color channels, such as the G-Channel from (0,0,255) to (0,255,255), which increases from 0 to 255. What does that mean? This shows that the color of the spectrum is obsessive-compulsive disorder, their tri-color channel must have a value of 255, there must be a value of 0, only one channel value is constantly changing.

Suppose we now select a color #4caf50, how do we analyze it next? 16 binary is not suitable for observation, we first converted it into 10: (76,175,80), you can find that the value of the G-Channel 175 is the largest, and the value of R Channel 76 is the smallest, which indicates that this color prefers G-channel, and Hate R Channel, B channel is indifferent, Then it is in the spectral performance is in the R channel value is the smallest, the G-Channel value is the largest, B-channel value does not matter the color gradient region, where? The code passed can be judged at (0,255,255) to (0,255,0) this block, which is the number 3. As for the relative position within the block the calculation method has been given in the previous section and is not described here.

It should be noted here that it is possible that the color we choose is the shape (0,0,255) or (0,255,255) the number of extreme values is not the only case, for this special sample, do sufficient verification can, also no longer repeat.

4, according to the mouse position to change the color selection

By convention, give a GIF:

　　

Get the mouse position is very simple, I do not explain, now also known as the main color, then we can make the following:

　　

, when the main tone is (255,0,0), assuming the mouse position is the center point, then what is the selected color? If you can't work it out in one step, count it. We first calculate the left and right midpoint of the color, very simple, using the algorithm previously posted to calculate the left midpoint of the color is (127,127,127), (127,0,0), so the center of the color of the point (127,63,63), or (127,64,64), The main look is your rounding rules.

5, according to the main tone to change the pickup point location

The GIF here is the same as in section 3:

　　

As you can see, selecting a preset color will not only change the spectral position, but also change the position of the color selection point. Suppose we choose a preset color #4caf50, its 10 binary is: (76,175,80), and then assume that at this time we also know the main tone (that is, the color of the upper right corner of the pick area), so that the same as the bar 3, but from the original one dimension into two-dimensional just.

6, not quite understand the logic of Google

　　Given a color (76,175,80), through the above 5 section of the content, you may calculate the upper right corner of the main tone is (0,255,80), but Google's ColorPicker is (0,255,10), this is not a special case, For example, click on a preset color (244,67,54), according to our algorithm the main tone should be (255,67,0), but Google's result is (255,17,0), interested you can try to try some preset values.

So how is Google's answer calculated? Just try a few sets of data and you'll find that Google is so 255* (Min-common)/(Min-max) that calculates the value of a non-extremum channel . As for why this calculation, I would like to know the friends of the park to enlighten.

Four

　　

　　

Five, the source code

The source of the color picker discussed in this article has been open source on GitHub: Https://github.com/NaBian/HandyControl

WPF Control Library--clone Chrome's ColorPicker