Learn to do c # skin beautification (3)

Learn to do c # skin beautification (3)

-- Create a CheckBox control

Overview and navigation

Source code download

First look at the final:

 

 

Maybe you have figured out how to implement this checkbox? Yes, the front frame is an image, and the text behind it is a label. After explaining the button above, I think the persons with the ability can be made separately. If you are not familiar with it, let's start with step by step! GO...

Open the QLFUI of the previous project and create a user control named CheckBox.

 

Similarly, we should first set it to make it look like a checkbox. The specific settings are as follows:

CheckBox control

Size: 70, 13

MinimumSize: 70, 13

BackColor: Transparent

Drag a picturebox and set the following attributes:

Size: 13, 13

Location: 0, 0,

BackgroundImageLayout: Stretch

Drag a label to set the following attributes:

AutoSize: falseLocation: 15, 0

Size: 50: 13

It should eventually look like this:

 

Okay, it looks like there is encoding next! Again, paste the code first, and then I will explain it in one sentence:

 

Code

 Using System;
Using System. Collections. Generic;
Using System. ComponentModel;
Using System. Drawing;
Using System. Data;
Using System. Linq;
Using System. Text;
Using System. Windows. Forms;
Using System. Reflection;
Using System. Drawing. Imaging;

Namespace QLFUI
{
Public partial class CheckBox: UserControl
{
# Region variable

Image _ normal;
Image _ normalmove;
Image _ checkedmove;
Image _ checked;
Bool check;

# Endregion

# Region attributes

[Category ("QLFSkinDll")]
[Description ("whether the control is selected")]
Public bool Checked
{
Get {return check ;}
Set
{

If (value = true)
{
PictureBox1.Image = _ checked;
}
Else
{
PictureBox1.Image = _ normal;
}
Check = value;
}
}

[Category ("QLFSkinDll")]
[Description ("displayed text")]
Public string CheckBoxText
{
Get {return this. label1.Text ;}
Set {this. label1.Text = value ;}
}

# Endregion

# Region Constructor

Public CheckBox ()
{
This. SetStyle (ControlStyles. AllPaintingInWmPaint | ControlStyles. OptimizedDoubleBuffer, true );

Bitmap nl = new Bitmap (Image. FromStream (Assembly. GetExecutingAssembly (). GetManifestResourceStream (@ "QLFUI.Res.checkbox.check.bmp ")));
_ Normal = nl. Clone (new Rectangle (0, 0, 13, 13), PixelFormat. Format64bppPArgb );
_ Normalmove = nl. Clone (new Rectangle (13, 0, 13, 13), PixelFormat. Format64bppPArgb );

Bitmap n2 = new Bitmap (Image. FromStream (Assembly. GetExecutingAssembly (). GetManifestResourceStream (@ "QLFUI.Res.checkbox.check2.bmp ")));
_ Checked = n2.Clone (new Rectangle (0, 0, 13, 13), PixelFormat. Format64bppPArgb );
_ Checkedmove = n2.Clone (new Rectangle (13, 0, 13, 13), PixelFormat. Format64bppPArgb );

InitializeComponent ();

PictureBox1.Image = _ normal;

}

# Endregion

# Region event

Private void picturebox#mouseenter (object sender, EventArgs e)
{
If (check = true)
{
PictureBox1.Image = _ checkedmove;
}
Else
{
PictureBox1.Image = _ normalmove;
}
}

Private void pictureBox1_MouseLeave (object sender, EventArgs e)
{
If (check = true)
{

PictureBox1.Image = _ checked;
}
Else
{
PictureBox1.Image = _ normal;
}
}

Private void picturebox#mousedown (object sender, MouseEventArgs e)
{
If (check = false)
{
PictureBox1.Image = _ checkedmove;
Check = true;
}
Else
{
PictureBox1.Image = _ normalmove;
Check = false;
}
}

Private void label1_TextChanged (object sender, EventArgs e)
{
Label1.Width = label1.Text. Length * (int) this. Font. Size + 5 );
This. Width = label1.Width + 20;
}

Private void CheckBox_SizeChanged (object sender, EventArgs e)
{
Label1.Width = this. Width-15;
}

# Endregion

}
}

 

Variable:

 

At the beginning of the CheckBox class, I have defined four image variables to indicate the move-in and remove images of the mouse in the selected and unselected statuses respectively! The next bool check variable indicates whether the control has been selected (this is the most important attribute of the checkbox, right ?!).

Attribute:

Next, there are two attributes, which are clearly annotated in my code. There are only two things to explain: 1. What is [Description ("displayed text? You will understand the figure,

Do you understand this? Yes, it is used to explain your attributes (others do not know what it means when using your control, so we should comment out it as appropriate )! The second thing to note is that when setting the Checked attribute, you must replace the image, which is different from the one that is not selected! Other attributes can be easily understood after being explained by the button control. Here we will not be so arrogant.

Next, let's look at the constructor. In the first sentence of this. SetStyle, I will not talk about it. If you don't understand it, you can refer to the explanation in the button. In the next six sentences, you can get the images in four states, but the results do not seem very easy! This is because our original image is like this.

 

No. The image is painted in one image. Therefore, we need to use the bitmap clone function to intercept the image in different Rectangular areas. This explains what Clone means. The remaining two sentences are not too long. They are the same as those in the button.

 

What should we do next? Based on the experience of making the button control, we should start to write various mouse events and process different backgrounds in these events. Start...

In the event, we have written three events in total. Unlike the button, there is no MouseUp event here. Why? No, haha! Joke, because the background does not need to be changed for the mouseup event! But if you are happy, you can add it. The content in the event is also very simple, that is, the background of picturebox is changed based on the current check status and the mouse status. It's very simple. I will not talk much about it. In addition, it should be noted that the event corresponding to the label is also associated with the generated mouse event (how to associate? Select the existing events in the corresponding events of the label attribute)

Okay. Let's run it to see the effect!

 

Running seems to be good. All the attributes we set can be successfully applied. However, if we reference this control in other projects and set the CheckBoxText attribute to a little longer, we will find that some text cannot be displayed. This is because the width of our control is fixed to 70 pixels. When the label length is changed, the part that exceeds the length of the entire control will be hidden. Therefore, we also need to change the length of the entire control when the label content is changed to fully display the text content.

Look at the code. We write a label text change event label1_TextChanged. This event is triggered when the text in the label changes. The first sentence in the event is to calculate the width of the label to be displayed based on the number of words. The font width is (int) this. font. size + 5 to get (the width I can basically get the required test), to get the label width, we just need to add this width to 20 (the image width) the width of the entire control is obtained, so that the text is displayed normally. Of course, in case we need to add an event (basically unavailable, but it's safe, huh, huh), it's the CheckBox SizeChanged event (see the code ), when we manually pull the checkbox, we manually change the label length so that even if the previous event fails to be displayed, some text is not displayed, we only need to manually drag the length of the checkbox to display the text.

OK. the checkbox control is created.

The next article will begin to create the form part first... Coming soon!