I'm working on project and I have to do kind of color picker using C#.
So I've decided that it will be a Panel with this background in Win Forms App.
Background should have gradient with three colors in rgb: red (0 - 255), blue (0 - 255) and green = 0.
But I can't find any information about what I should use for this.
I tried to write some code and here is what I've done.
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
panel1.Paint += new PaintEventHandler(panel1_Paint);
panel1.Refresh();
}
private void panel1_Paint(object sender, PaintEventArgs e)
{
Point startPoint = new Point(0, 0);
Point endPoint = new Point(150, 150);
LinearGradientBrush lgb =
new LinearGradientBrush(startPoint, endPoint, Color.FromArgb(255, 255, 0, 0), Color.FromArgb(255, 255, 255, 0));
Graphics g = e.Graphics;
g.FillRectangle(lgb, 0, 0, 150, 150);
// g.DrawLine(new Pen(Color.Yellow, 1.5f), startPoint, endPoint);
}
}
}
And now I have panel with this gradient
What I should use to get gradient at first picture?
And second question: What should I do to get the pixel color after clicking on this background?
Here is an example for using a multicolor
LinearGradientBrush
in thePaint
event:You can freely vary the number of colors, the angle or the spread of the stop points. Just make sure you always have the same number of colors and stop points and let them start at 0 and end at 1.
The colors in the constructor are ignored, btw..
To get a clicked color you can code the
MouseClick
:If you want to catch many clicks it may be better to keep the
Bitmap
in a class level variable instead of recreating it all the time.. Setting it as the Panel's BackgroundImage, as Kala's answer assumes may also be a good option..This should answer the question in the title. However your first image doesn't show a gradient with three colors. It shows a 2D gradient with four colors. For such a more expensive coloring method you should put the colors in a
Bitmap
and set it as thePanel
'sBackgroundImage
..Update1 Here is a piece of code that creates a 2D Gradient:
Here is how you use it:
This uses simple
LinearGradientBrushes
without an extra colors list going down over the height of thePanel
.Note that
Color.Green
is a rather dark hue, so I usedFromRgb
for a brighter green. If yourPanel
is greater than 256 pixels you may want to optimze by filling larger stripes; if it is vertical you may want to change the loop to go over x instead of y..Here is the result:
To pick with a click you now simply read out the color from the
BackgroundImage
:Update 2:
When looking over this MSDN page we can find that there actually is a built-in tool to create 2D gradients.
It is the PathGradientBrush
Here is an example..:
.. and the code:
This uses two simple helper functions. One returns the corner points of a rectangle:
The other calculates a median color from a
List<Color>
. This is used as theCenterColor
..:The result pretty much identical to the one from using stripes of
LinearGradientBrushes
. It is simpler and should perform a bit better; it is what I would recommend obviously..Note the changed order of the colors (or corners)! The
SurroundColors
apply to opposing corners of the rectangle..Note:
When studying that page one can find that there actually are four different uses for that brush.
They differ in how to set it up (
GraphicsPath
orPoint[]
), which color collections to fill (SurroundColors
orInterpolationColors.Colors
) and how to call it (with a shape or a path). And the results also differ a lot.Also note that only three results of the four ways are shown, although code for all four is provided!..