Vs Custom Control Design Example 1 (Linear Control Design)

Directory

1. Instructor Yang is a enthusiastic person

Ii. Getting Started

3. What else do I need to explain?

4. OK?

V. Final code

1. Instructor Yang is a enthusiastic person

My project has been open-source for some time. I always thought that I had a very good idea and contributed a lot of energy to the projects. I thought that my classmates would be very happy, as a "hungry man sees bread", he will happily study my project code, but in fact our group is very cool. I think it should be because everyone is still studying the Code and is too late to talk or don't like to talk. Until today, Teacher Yang called me and said something, it seems that people do not know much about databases and so on. I only know that I am wrong. My life is always like this: You didn't expect too much ....... Teacher Yang is my most admired teacher. He is a passionate person. On the phone, I have always invited me to give a lecture with my classmates to help you understand the code, so that you can continue to learn this project. This will not overwrite your original intention. However, I think I may not be a lecturer, and it is too formal to give a lecture again. I will discuss with instructor Yang a compromise solution: Use the QQ group that everyone has joined, I try to write a few tutorials to introduce the knowledge that may be used in my project from scratch. I hope this will help you.

I'm not sure if I can stick to it (maybe this is one of the reasons why I am afraid to give lectures to my classmates. People sometimes cannot know themselves too well.) but no matter what, let's work together. Let's start from the first one today.

In Microsoft Visual Studio 2012 (VS), there are many controls for daily form design. However, in many cases, the required controls cannot be found, for example, draw a straight line. Of course, Microsoft cannot be too demanding. After all, they have done well. What's more, sometimes we forget to pay for their software usage .......

Many years ago (when you are not a primary school student, you probably should have been a human), I had a project that was doing very well. I thought the owners would be very satisfied. In fact, they were really satisfied. The boss gave me an understatement only when I finally want to deliver the goods and they want to pay (this is the most important part of my time, so complex interfaces (is it really complicated, for example. But lunjia is the capital party for payment, and the customer is God. You will know later.) Can you draw several lines to separate them?

I thought it was right, but after I went back, I could not find a line control in the toolbar. It was a simple thing that Microsoft could not help me, where did you go, Bill ....... Later, I used PS to solve the problem (at that time, I still did not customize the control, and I blamed Bill), but this made me feel ashamed for a long time, I think I am not a qualified programmer. Of course, I did it today, as shown in the figure below:

Ii. Getting Started

Let's get down to the truth. To do this (do a widget that can draw a line), of course, the first thing is to open vs (if you have installed it) and create a new project (this should not be difficult ):

Step 2: In the new project, right-click the "linecontrolstest" project, find "add" in the displayed menu, and select "user control ". After adding a user-defined control, I found that I still won't talk about it. Use images to describe it (there are pictures with truth)

Step 3: After completing the above steps, you should be able to see this interface:

In this interface, press the "F7" button (well, I am beginning to hate myself) to go to the code editing interface. For example:

Change the control inheritance class from the original "usercontrol" to "control". The purpose of this operation is not to use the interface that vs automatically helps us with. We need to do this interface on our own. If you do this, an error occurs. If you press F5 to run the project, the following error is returned:

The solution is to set "This. autoscalemode = system. windows. forms. autoscalemode. font; "This code can be deleted, because this code is for the" usercontrol "class. We inherit from the control class now, and do not need this code. (Another way is to create a new class instead of creating a user control and inherit the system class. windows. forms. control class, but this method requires adding a few references in using. If you are interested, try it. The effect is the same)

Step 4: start to write code. This is the most important and the only part of this project that requires us to brainstorm. Well, the rest of the following things have become simple. You just need to copy the following code to the class. We recommend that you manually enter the code in vs to discover new things.

Protected override void onpaint (painteventargs E)

{

Pen = new pen (systemcolors. controltext); // defines a paint brush

This. Height = 18; // set the height of the control.

Pen. width = 1; // you can specify the width of the paint brush.

E. graphics. drawline (pen, 0, this. height-pen. width, this. width-1, this. height-pen. width); // draw a line at the bottom of the control

Brush BR = new solidbrush (systemcolors. menuhighlight); // define a brush

Sizef = E. Graphics. measurestring (text, this. font); // obtain the size of the control text in this control based on the font set by the control and the text attribute of the control.

E. graphics. drawstring (text, this. font, BR, (this. width-sizeF.Width)/); // according to the above code to get the file size, write control text in the middle of the control

BR. Dispose (); // clear the usage of the paint brush to avoid memory occupation.

Base. onpaint (E); // This sentence cannot be omitted. This is the onpaint code that calls the basic class (control ).

}

Step 5: Right-click the project name in the solution, and click "generate" in the displayed menu ".

Step 6: Double-click form1 in the solution. On the form1 form interface that appears, we can see that the control we designed appears in the toolbar. Drag our own control (pxyline ), on the form, we can see that the controls we have done have implemented the functions we have designed.

It's too simple, but not all projects are so simple.

3. What else do I need to explain?

I think I have already made it very clear. With my skills in writing, this is already the clearest thing I can say, what's more, every sentence in my code has comments (this is usually impossible ). This override and onpaint should be mentioned, but you may need to find the help document. Microsoft officially explains override in this way: to expand or modify the inherited methods, attributes, indexer or event abstract implementation or virtual implementation, the override modifier must be used. As for onpaint, Microsoft makes it easier: it triggers the paint event. Of course, you may have some experience through this project.

4. OK?

It would be okay if I only met the basic functions, but if the code was delivered to me by a person from my company, I would be far from satisfied (I am not a demanding boss, but the code is really bad. I wrote it :-().

For example, why is text displayed in center mode? Can I set a property to change the display mode?

For example, how do I write the control height inside? If I need to modify the control height, do I have to modify it in the source code and re-compile it? This is too many times.

For example, what if I want to draw a rough line?

For example, what about the file color and line color?

And, for example ......, You can also imagine that :)

Let's add some more materials. For example, let me make another supplement, and let the others be delivered to you for implementation. I hope that you will share the Code with me after the implementation is complete (maybe I can give some comments on your code ).

Step 1: To adjust the line width of the control, we define a private variable penwidth and the default value is 1. The Code is as follows:

Private int penwidth = 1;

Step 2: encapsulate: Select penwidth (place the mouse in the penwidth letters) and right-click the following menu (the simplest way is to press Ctrl + R and then press E):

Vs automatically generates the following code:

Public int penwidth

{

Get {return penwidth ;}

Set {penwidth = value ;}

}

Make some comments on it (this is a good habit that I'm proud of, and I don't know if you have any ).

/// <Summary>

/// Set the paint width

/// </Summary>

Public int penwidth

{

Get {return penwidth ;}

Set {penwidth = value ;}

}

By the way, add the [browsable (true), category ("Custom"), description ("set paint width")] to the following:

/// <Summary>

/// Set the paint width

/// </Summary>

[Browsable (true), category ("Custom"), description ("set control paint width")]

Public int penwidth

{

Get {return penwidth ;}

Set {penwidth = value ;}

}

Well, I have seen some people raise their hands.

"[Browsable (true), category (" Custom "), description (" set control paint width ")]" "is what, take a look at this:

After the above Code is added, click the pxyline control on form1. A "Custom" directory will appear in the property form of the control, this is the control property "penwidth" We just defined. Here, you can freely set the penwidth property of the control. For more details, refer to Baidu.

Step 3: Modify the onpaint code.

Change the original code: Pen. width = 1; To: Pen. width = penwidth;

Okay, this is really OK, and the "complete" code is pasted below. The other "for example" depends on you.

V. Final code

Public pxyline ()

{

Initializecomponent ();

}

Private int penwidth = 1;

/// <Summary>

/// Set the paint width

/// </Summary>

[Browsable (true), category ("Custom"), description ("set control paint width")]

Public int penwidth

{

Get {return penwidth ;}

Set {penwidth = value ;}

}

Protected override void onpaint (painteventargs E)

{

Pen = new pen (systemcolors. controltext); // defines a paint brush

This. Height = 18; // set the height of the control.

// Pen. width = 1; // you can specify the width of the paint brush.

Pen. width = penwidth; // use the property of the control, so that you can modify the property to control the behavior of the control, instead of modifying the source code before compiling.

E. graphics. drawline (pen, 0, this. height-pen. width, this. width-1, this. height-pen. width); // draw a line at the bottom of the control

Brush BR = new solidbrush (systemcolors. menuhighlight); // define a brush

Sizef = E. Graphics. measurestring (text, this. font); // obtain the size of the control text in this control based on the font set by the control and the text attribute of the control.

E. graphics. drawstring (text, this. font, BR, (this. width-sizeF.Width)/); // according to the above code to get the file size, write control text in the middle of the control

BR. Dispose (); // clear the brush when it is used up to avoid memory usage.

Base. onpaint (E); // This sentence cannot be omitted. This is the onpaint code that calls the basic class (control ).

}

Vs Custom Control Design Example 1 (Linear Control Design)