Introduction
In order to follow this tutorial, you will need to have Visual Studio .NET and .NET Framework installed on your computer. If you only want to run the sample application, you will need only .NET Framework.
Getting to work:
Today, we will create a sample application witch you can use to find a color, along with his RGB value, both in decimal, as Red, Green and Blue and in hexadecimal.
Let’s get to work, shall we? Open Visual Studio .NET ( if you didn’t already did that ), and create a new C# Windows Application ( File -> New Project ->Visual C# Projects -> Windows Application ). Name it whatever you like (I called it ColorChooser). Visual Studio .NET creates a new project adds to the project a Form.
If all worked well, you are now in front of the Designer view. Here, let’s add a few controls to our form. Drag from the Toolbox ( if the Toolbox is not visible, go to View -> Toolboxor press Ctrl + Alt + X ) a GroupBox control. Set its Text property to “Color Choice”. Inside this control we will add three Label controls. Set the Text property of the first Label to “Red”, and its ForeColor to Red (255, 0, 0). Set the second Label’s Text property to “Green” and its ForeColor to Green (0, 255, 0). Do the same for the third Label ( Text to Blue and ForeColor to Blue (0, 0, 255). Also, in the same GroupBox where we added the labels, we must add three VScrollBar controls. For the first VScrollBar, let’s set its Maximum property to 255, and its Minimum to 0. Also, change the LargeChange property to 1. Let’s name it to scroll_red. Do the same thing for the other two VScrollBars, except for the Name, that will be scroll_green and scroll_blue.
The next thing we will need to add is another GroupBox. Set its Text to “Color Codes”. Now let’s copy the three Labels created earlier and paste them into the newly created GroupBox. We will also need to add three NumericUpDown controls from the Toolbox. For the first NumericUpDown control, we will change the TextAlign property to Center, the Maximum property to 255 and the Name to upDown_red. For the other two controls, repeat the steps described above, setting the Name to upDown_green and upDown_blue. In the same GroupBox, let’s add an extra Label with the Text property set to “Hexadecimal” and an extra NumericUpDown control. Set its Hexadecimal property to true, TextAlign to center, Maximum to 16,777,215 and its name to upDown_hexa. Probably you are wondering what’s with that big number? Well, as you probably figured out, we are going to use the upDown_hexa control to represent the color code in hexadecimal value. The big number represents decimal value for “FFFFFF”, witch represents the maximum possibe value for a color ( it’s the code for the color white ). Let’s add another GroupBox, set its Text to “Preview”, and inside it let’s add a Label. Set the Label’s Dock property to Fill. We are now done with the Design part of our application.
After completing these steps, my application’s interface looks like this:
Don’t worry if yours looks different. The issue here is not design.
Now let’s add functionality to our application. Double-click the form’s surface. Visual Studio .NET will create a method called Form1_Load. Here, let’s add the following code:
scroll_red.Value = 0; scroll_green.Value = 0; scroll_blue.Value = 0; upDown_red.Value = 0; upDown_green.Value = 0; upDown_blue.Value = 0; upDown_hexa.Value = 0; lbl_preview.BackColor = Color.FromArgb ((int) upDown_red.Value, (int) upDown_green.Value, (int) upDown_blue.Value);
What we just did was initialized all the values of the controls to 0. Also, we set the BackColor property of lbl_preview to the color composed of the red, green and blue, witch is Black (0, 0, 0). You notice that we cast the Value property of our NumericUpDown controls to int type (the return type is decimal).
The next step is to add methods for the Scroll event of the three VScrollBars. In the Designer view, double click scroll_red control. VS .NET created a method called scroll_red_Scroll. In this method, let’s add the following code to handle the event:
upDown_red.Value = scroll_red.Value; lbl_preview.BackColor = Color.FromArgb ((int)upDown_red.Value, (int)upDown_green.Value, (int)upDown_blue.Value); upDown_hexa.Value = upDown_red.Value * (int)Math.Pow(2, 16) + upDown_green.Value * (int)Math.Pow(2,8) + upDown_blue.Value;
Let’s see what we’ve done so far. First, we assign the value that was change in the upDown_red control to the scroll_red. Next, we update the preview label with the changed color. The last line of code is more complicated. As you probably know, a hexadecimal color is represented using six hexadecimal values. The first two values represent the code for the Red channel, the next two – the Green channel and the last two – the Blue channel. The hexadecimal number FF represents the maximum value accepted for a color (is equal to 255 in decimal). A channel in a color can have values between 0 and 255. This means you can assign 256 different values for a channel. The “magic” 256 different values represent a byte. So, we see that for us to represent a color in hexadecimal, we will need three bytes, one for each color channel. In order to represent a color from decimal R,G,B notation to hexadecimal, we will need to add the red value to the first byte, the green to the second and the blue to the last. In order to move the red value to the first byte, we must multiply it by 256*256 (or 2^16). Analogue, to “push” the green value to the second byte, we multiply it by 256 (or 2^8). The blue value is left unchanged. Now, to form the decimal representation of a color, we add the three values. The last thing we will need to do is convert that number into hexadecimal. Happily, .NET takes care of that for us. Since we modified the Hexadecimal property of our upDown_hexa control to true, it displays only hexadecimal values ( but accepts decimal ).
Now let’s go back to Design view and double-click the scroll_green control. In the method newly created add a code similar to the one above:
upDown_green.Value = scroll_green.Value; lbl_preview.BackColor = Color.FromArgb((int)upDown_red.Value, (int)upDown_green.Value, (int)upDown_blue.Value); upDown_hexa.Value = upDown_red.Value * (int)Math.Pow(2,16) + upDown_green.Value * (int)Math.Pow(2,8) + upDown_blue.Value;
Do the same for the scroll_blue control:
upDown_blue.Value = scroll_blue.Value; lbl_preview.BackColor = Color.FromArgb((int)upDown_red.Value, (int)upDown_green.Value, (int)upDown_blue.Value); upDown_hexa.Value = upDown_red.Value * (int)Math.Pow(2,16) + upDown_green.Value * (int)Math.Pow(2,8) + upDown_blue.Value;
After these steps, you are ready to run the application for the first time.
Now, we must repeat the steps above for the NumericUpDown controls. For the upDown_red control, go to Design view and double-click the control’s surface. Add this code in the newly created upDown_red_ValueChanged method:
scroll_red.Value = (int)upDown_red.Value; lbl_preview.BackColor = Color.FromArgb((int)upDown_red.Value, (int)upDown_green.Value, (int)upDown_blue.Value); upDown_hexa.Value = upDown_red.Value * (int)Math.Pow(2,16) + upDown_green.Value * (int)Math.Pow(2,8) + upDown_blue.Value;
In this code, we update the scroll_red control when we modify upDown_red control. Almost the same code applies for the upDown_green control’s upDown_green_ValueChanged method:
scroll_green.Value = (int)upDown_green.Value; lbl_preview.BackColor = Color.FromArgb((int)upDown_red.Value, (int)upDown_green.Value, (int)upDown_blue.Value); upDown_hexa.Value = upDown_red.Value * (int)Math.Pow(2,16) + upDown_green.Value * (int)Math.Pow(2,8) + upDown_blue.Value;
Repeat the steps above for the upDown_blue control:
scroll_blue.Value = (int)upDown_blue.Value; lbl_preview.BackColor = Color.FromArgb((int)upDown_red.Value, (int)upDown_green.Value, (int)upDown_blue.Value); upDown_hexa.Value = upDown_red.Value * (int)Math.Pow(2,16) + upDown_green.Value * (int)Math.Pow(2,8) + upDown_blue.Value;
The last thing we will need to add to our application is to create a color from the hexadecimal color’s value. So go to Design view and double-click the upDown_hexa control’s surface. A method called upDown_hexa_ValueChanged will be created. In this method, let’s add the following code:
int red = (int) upDown_hexa.Value / (int)Math.Pow (2,16); int green = ( (int)upDown_hexa.Value % (int)Math.Pow(2,16) / (int) Math.Pow (2,8); int blue = ( ( (int) upDown_hexa.Value % (int) Math.Pow(2,16) ) % (int) Math.Pow(2,8) );
In the red variable, we keep the value for the red channel. As I’ve explained earlier, the red value is in the first byte of the hexadecimal representation of the color. So, to get that value, we must divide the hexadecimal value with 2^16 (witch represents the values of the second and third bytes). In the green variable, we take the remainder of the previous division and again divide it by 2^8(256). The last variable, the blue, is the remainder resulted after dividing our hexadecimal value with 2^16 and with 2^8. The next step is to update the lbl_preview control, and also the other six controls with the values resulted from the operations above:
lbl_preview.BackColor = Color.FromArgb(red, green, blue); upDown_red.Value = red; upDown_green.Value = green; upDown_blue.Value = blue; scroll_red.Value = red; scroll_green.Value = green; scroll_blue.Value = blue;
And this is our application. Here it is in action on my computer:
Hope you had as much fun as I did doing this.
Until next time, good luck and happy programming!
Raul POPESCU
Attachments:
Project Files: csharp_color_chooser.zip