C # Journey to Discovery lecture 5 basics of graph development-Asp. NET Report Software

Navigation statistics announcement
Frequently Used link message book my participating teams my tags links points and rankings

The entire collection is good. Thank you for sharing it. -- Georgehuang guys make English support ...... -- % username % @ tmlihan in case of system. windows. forms. application. executablepath contains spaces, such as "C: \ Program Files \ ABC". If there are no double quotation marks, then the process... -- Yuan Yongfu strinstallutilpath, "+ system. windows. forms. application. executablepath + & qu... -- tmlihan is really a master, and it is very useful. -- the fish that cannot access the bank {ttzhang}

Reading ranking comment ranking

C # journey of discovery Part 5 basics of graph Development

Yuan Yongfu

To help you better understand and use C #, we will begin this series of technical lectures on the "C # discovery Journey. Considering that most of you are engaged in Web database development, the so-called discovery is to discover areas we are not familiar with, so the content of this series of lectures will be C # applications other than web database development. Currently, the main content of the plan is graphic development and XML development, and multiple courses are planned and arranged. In the future C # discovery journey, we will explore and discover other unknown fields of C # in a step-by-step manner, more in-depth understanding and understanding of using C # for software development, broaden our horizons, and enhance our comprehensive software development capabilities.

Demonstration of this series of coursesCodeFor http://files.cnblogs.com/xdesigner/cs_discovery.zip. Ellipsebuttonlib.zip is the Demo code of this course.

Course description

After the last course on the basic principles of Windows Graphics development, you may have some perceptual knowledge about Windows Graphics development, but you may not know much about it. In this course, we will use C # To develop a simple elliptical button graphics software from scratch, and start to explore C # graphics development with everyone.

Functional requirements

In this fast software development, the first step is to determine the functional requirements of the software.

An existing customer needs a software with the following functional requirements:

User Interface of the last generated Software

Software Design

Based on functional requirements, the software is designed as follows:

The elliptical button is a custom control derived from usercontrol. Override the onmousemove, onmouseenter, and onmouseleave events to achieve dynamic button effects.Software Development Process

After a simple design, we began to develop the software.

Open the integrated development environment vs. net2003. Create a C # winform. netProgram. The customer eventually needs a component, but here we start to use the winform. NET application engineering mode for debugging convenience. After development, we can set it to the DLL engineering mode and submit it to the customer.
To develop images, the C # project must reference system. drawing. DLL, add winform. the reference is automatically added during the. NET process, but the reference may not be added by default when other types of projects are added. In this case, you need to manually add the reference. System must be referenced frequently for Graphic programming. the type in the drawing namespace. Therefore, you must add using system at the beginning of the Code. drawing; however, many times. net will automatically add this code, if not automatically added, You need to manually add.

Add controls

Add a user control named ellipsebutton.

First, define some properties of the control, including the border color, button background color, border color and button background color when the mouse is suspended.

Defines a mouse hover flag variable. Bool bolmousehoverflag = false;

Draw control user interface

Override the onpaint method of the control and draw the Oval Button. The code is displayed in the demo. When developing a custom control, you can use the paint event of the corresponding control or override the onpaint method. Here, the onpaint method is rewritten to make the code structure simple, when rewriting this method, you must call the base of the base class. onpaint method.

In the override onpaint method, there is a parameter of the type painteventargs. This parameter has several members, the most important of which is the graphics member and cliprectangle member. The graphics member is the drawing object, it can be seen as a blank canvas and any image can be drawn. The cliprectangle member is the area cut rectangle.

In C # graphics development, the graphics type is the most important type. It represents a canvas object and any graphic operation is output to this canvas. This type provides many attributes and methods to set the output quality of some images. It also provides a series of methods to draw images starting with draw and fill the images starting with fill. It also provides methods and attributes for coordinate transformation.

Cliprectangle indicates cutting the rectangle. Generally, when the control re-draws the content, it does not need to overwrite all the content, but rather draws a part of the content, this parameter indicates that the part of the control needs to be re-drawn, and the interface outside the area does not need to be drawn. Therefore, this parameter is the basis for optimizing the performance of the graphic interface software. Here, the cliprectangle parameter is not required because the Oval Button draws less content and the interface structure is simple.

Using (system. Drawing. drawing2d. graphicspath Path =
New system. Drawing. drawing2d. graphicspath ())
{
Path. addellipse (0, 0, this. clientsize. Width-1, this. clientsize. Height-1 );

Using (solidbrush B = new solidbrush (
Bolmousehoverflag? This. hoverbackcolor: This. buttonbackcolor ))
{
E. Graphics. fillpath (B, PATH );
}

Using (pen p = new pen (
Bolmousehoverflag? This. hoverbordercolor: This. bordercolor, 2 ))
{
E. Graphics. drawpath (p, PATH );
}
}
If (this. Caption! = NULL)
{

Using (stringformat F = new stringformat ())
{

F. Alignment = system. Drawing. stringalignment. Center;

F. linealignment = system. Drawing. stringalignment. Center;

F. formatflags = system. Drawing. stringformatflags. nowrap;

Using (solidbrush B = new solidbrush (this. forecolor ))
{
E. Graphics. drawstring (
This. Caption,
This. Font,
B,
New system. Drawing. rectanglef (
0,
0,
This. clientsize. Width,
This. clientsize. Height ),
F );
}
}
}
} // Protected override void onpaint (painteventargs E)

Protected override void onpaint (painteventargs e ){

In this method, we first create a graphicspath object, which represents a path. The so-called path is a combination of several straight lines and curves. We can add various line segments or curves to the path object. Here we call its addellipse method to add an elliptic curve to the path, which is a closed curve. The parameters of the addellipse method represent an elliptic tangent rectangle. The rectangle is the customer area of the control.

The customer zone is the area in which the control can customize the drawing. Some Windows controls have borders, such as text input boxes, and cannot draw images on the borders. Therefore, if a widget has borders, the size of its customer area is not equal to the control size, in this case, you need to use the clientsize attribute of the control to obtain the size of the control's customer zone. Of course, if the control does not have a border, the size of the customer zone is equal to the size of the control. For programming convenience, we recommend that you use the clientsize attribute to obtain the size of the area that can be drawn when drawing the control content in the future.

After creating an elliptical path, we can use the elliptical drawing method to create a solidbrush object, and then call the fillpath method of the Drawing Object to fill the path. Create a pen object and use the drawpath method of graphics to draw a path. The order cannot be reversed. If you draw a border and then fill in the ellipse, the subsequent operations overwrite the previous operations.

Graphical Programming has a very obvious feature, that is, various graphic operations should pay attention to the order, because the last graphic operation can easily overwrite the previous graphic operation results, this makes debugging difficult in graphic development. In many cases, you need to perform a very careful static check on the code.

Many Graphic programming objects, such as solidbrush, pen, and graphispath, all implement system. the idisposable interface uses unmanaged resources internally and destroys these objects when they are not used. Therefore, the using syntax structure is used in the code to process these objects.

Here, we use the bolmousehoverflag variable to make the background color and border color of the button different when the mouse is hovering or not hovering.

After the elliptical area is drawn, we can draw the button text. Create a stringformat object to control the style when drawing text. We set the text format to horizontal center alignment, vertical center alignment style, and cannot wrap, only single line of text can be displayed.

Create a solidbrush object based on the text color, draw the text, and call the drawstring method of the Drawing Object to draw the string. The first parameter of this function is the text content, the second is the font, the third is the painter object used to draw the text, and the fourth is the rectangular area that contains the text display area, 5th are text format control.

After the onpaint method is completed, we obtain a user control with an elliptical appearance. We compile the program and enter a Form Designer. In the "My User Control" column of the toolbox, you can see that there is already an ellipsebutton project. Press this project to place an elliptical button on the form. You can set the text in the attribute list. Then run the program and you can see that an elliptical button is displayed on the running form. However, this button is just like an image and has no vitality. We also need to improve this control to achieve dynamic effects.

Respond to events to achieve dynamic results

Open the code of the button control and add the code to achieve the dynamic effect of mouse hover. First, write a checkmousehover function, which is used to determine whether the mouse is hovering over the button. Because the button is an elliptical shape, some content on the control does not belong to the button area, even if the mouse is on the control, you also need to determine whether the mouse cursor is in the elliptical area. The checkmousehover Function Code is as follows:

}
}

/// <Summary>/// Detect the release. The mouse hover status changes. If the release status changes, the draw control is overwritten./// </Summary>/// <Param> </param>/// <Param> </param>/// <Returns> whether the test point is in the elliptical area </returns>Private bool checkmousehover (int x, int y){Using (system. Drawing. drawing2d. graphicspath Path = new system. Drawing. drawing2d. graphicspath ()){Path. addellipse (0, 0, this. clientsize. Width-1, this. clientsize. Height-1 );Bool flag = path. isvisible (x, y );If (flag! = Bolmousehoverflag){Bolmousehoverflag = flag;// The entire control is invalid. You have to re-draw it, but do not draw the user interface immediately.This. invalidate ();// This. Refresh (); // force the user interface to be drawn immediately.}

Create a path object, add an elliptical area to the path, and call the isvisible function of the path to determine whether the specified point is included in the path. If not, the vertex is not on the elliptical button. If the result of this judgment is different from the result of the previous judgment, set the mouse hover status variable and re-draw the button.

The re-drawing control in the Code has two options: one is to call the invalidate method of the control, and the other is to call the refresh method. Both of them can re-draw the user interface, but there is a difference. The invalidate method declares that some or all of the control user interfaces are invalid, but does not cause immediate re-drawing of the user interface. Instead, the user interface is re-drawn only after a period of time, it can be seen as an asynchronous operation, while refresh is a synchronous operation that immediately re-draws the user interface and ends the refresh method after the painting is complete.

In general, the invalidate function causes a short delay, which cannot be noticed by humans. In this case, the invalidate method should be called. However, in a few cases, using invalidate causes a noticeable delay, the refresh method is required. The delay duration caused by invalidate is related to the underlying message driver mechanism of windows. here we can see that the more detailed graph programming is associated with the underlying windows, and the invalidate method is developed by the WIN32API function invalidaterect.. Net encapsulation, while the refresh method is the encapsulation of the WIN32API function updatewindow. Check the descriptions of the two API functions in msnd to understand why this problem occurs.

Proposed by Microsoft. the Net Framework aims to allow developers to quickly develop software without the underlying Windows API. net, so WIN32API is not used in conventional web database development. However, in graph development ,. the net framework still depends heavily on the WIN32API function ,. net Graphics-related class library contains a lot of WIN32API encapsulation, which is a bit similar to VC's MFC framework. VC's MFC personally thinks it is silly and powerful, however, it is inconvenient to use. net Framework contains a spiritual MFC, which is easy to use and has no weak functions, but is still based on WIN32API. Therefore, to thoroughly learn. Net graphics programming, you need to have a certain understanding of WIN32API, which also increases the learning difficulty of. Net graphics programming. Of course, you do not need to understand WIN32API for simple. Net Graphic programming.

This also reflects some special requirements for user experience in graphic development. Graphics software needs to draw images on computer screens. Due to the physiological characteristics of humans, the speed of officers and motor organs in Various hosts is different, and the brain is the most slow to respond, the speed of keyboard and mouse operations by hand is average, while the human eye can quickly reflect the changes in the screen for dozens of milliseconds. Because the human eye has a high response speed, therefore, there is a high requirement on the speed of drawing code of graphic software.

Override the onmousemove method of the control to process the mouse movement event. In the event processing process, the checkmousehover member is simply called, and the parameter uses the cursor position.

The control provides a series of methods starting with onmouse to process mouse events. This method has a parameter of the type mouseeventargs, which has some attributes, lists the mouse button status when a mouse event occurs, the scroll wheel count, and the mouse cursor position in the control customer area.

The control also overwrites the onmouseleave method to process the events when the mouse leaves the control's customer zone and cancel the mouse hover status of the control.

The customer asked the mouse to press this Oval Button to trigger an event. We chose the Click Event of the control as the button click event, so we overwrote the onclick function. The function code is

/// <Summary>
/// Process the mouse click event
/// </Summary>
/// <Param> </param>
Protected override void onclick (eventargs E)
{

Point P = system. Windows. Forms. Control. mouseposition;
P = base. pointtoclient (P );
If (checkmousehover (P. X, p. y ))
{
}
}

 

 

 

As the button is elliptical, When you click the control, you need to determine whether the click is in the elliptical area, so as to determine whether the click event needs to be triggered. Therefore, we rewrite the onclick method to process the Click Event of the control.

The parameter of The onclick method does not specify the cursor position. Therefore, we calculate the cursor position in the client area by ourselves. We use the control type mouseposition static attribute to obtain the cursor position on the computer screen, then, use the pointtoclient function of the control to convert the coordinates from the computer's screen to the client coordinates of the control, and then call the checkmousehover function to determine whether the coordinates are in the elliptical area. If the mouse is in the elliptical area, then base is called. the onclick method triggers the click event.

Test controls

Recompile the program, create a new form, and open the Form Designer. On the my user control page of the toolbox, you can see an ellipisebutton user control. If not, right-click the toolbox, select "Add/Remove project" from the menu ". In the dialog box, Click Browse and select the generated EXE or DLL file, and then select ellipisebutton to add the ellipsebutton project in the toolbox. Select the Oval Button and set the property list as a display control event. Double-click the Click Event of the add control to display a message box in the event, then compile and run the code to see an elliptical button with dynamic effects. The button control is compiled.

We set the project type to DLL style, re-compile, and get a DLL file, which can be submitted to the customer for use.

Summary

In this course, we used C # To develop a very simple small component with Dynamic Oval buttons, demonstrating the basic process of C # graphic development, this gives you a preliminary impression on C # graphics development. From this small program, we can see that there are not many codes, but the basic knowledge is relatively large. The software design, development, and Web database development are very different. Finally, I hope you can implement a triangle button control based on today's program.

In the next course, we will continue to use C # To develop a slightly complex graphics software, so as to further explore C # graphics development.

Posted on Yuan Yongfu read (4410) Comments (16) EDIT favorites

#1 floor. net

Reply to reference

I made this applet according to what you said, but every time I click the ellipse, the mouse will not be in the ellipse, so I cannot trigger the onclik event and reply to the reference.

FortunatelyArticleI just read it today. I do not have a special style to reply to the reference.

Edited by the author

Powered:
Blog
Copyright yuan Yongfu

Source of citation C # journey of discovery lecture 5 basics of graph development-Asp. NET Report software Nanjing yuan Yongfu-blog Park