[Knocking on the C # door] For Beginners: Principle of the scroll bar

17.9.4 drawing in the rolling window

The size of the form is determined by the size attribute of the form. The size includes the title bar and border of the form. The area used to display the customer document in the form is called the workspace (clientrectangle), and its size is represented by the clientsize attribute of the form (17-20 ).

In Figure 17-20, the size of the form is 308x234 pixels. The title bar width is 30 pixels, and the Border width is 4 pixels. Therefore, the workspace size is 300x200 pixels.

What happens if we want to display a 300x200 pixel rectangle and an 200x150 pixel ellipse in a 300x100 pixel workspace?

Figure 17-20 drawing in a rolling window Figure 17-21 the document size exceeds the Workspace

Author: Liang binyu, a member of the book C #, has been published in early July for nearly five years.
BeginnerClassroom@163.com
Http://www.cnblogs.com/BeginnerClassroom

For ease of narration, we call the text and graphics to be displayed as "documents ". Because the total height of the document is 250 pixels, and the height of the window work zone is only 200 pixels, some cannot be displayed (17-21 ). If the document is too large and the workspace cannot be fully displayed, you need to add a scroll bar in the window to view the blocked part.

How can I display a scroll bar? This can be achieved by setting the autoscrollminsize attribute of the form.

This. autoscrollminsize = new size (300,250 );

Because the document area is 300x250 pixels, we set the autoscrollminsize value to 300x250. Once the workspace area is smaller than this value, the form will automatically display the corresponding scroll bar.

Create a new project named "scrollwindow", set the form size to 308x234 pixels (excluding the title bar and border, the actual size of the workspace is 300x200 pixels), and then override onpaint () method.

Try: drawing in the scroll window

 Public partial class  Form1 : Form { // Constructor  Public Form1 () {initializecomponent (); // Set the background color of the form to white  This . Backcolor = Color . White; // The scroll bar is displayed when the workspace is smaller than 300x250 pixels.  This . Autoscrollminsize = New Size (300,250 );} // Override the onpaint () method  Protected override void Onpaint ( Painteventargs E ){ Base . Onpaint (E ); Graphics G = E. graphics; // Draw a rectangle and an ellipse G. fillrectangle ( Brushes . Lightpink, 0, 0,200,150); G. fillellipse ( Brushes . Lightgreen, 0,150,300,100 );}}

RunProgramThe scroll bar appears, as shown in result 17-22.

But when we drag the scroll bar, unexpected things happen. The form does not draw the lower half of the elliptic, but draws the upper half of the elliptic again (17-23 ).

Figure 17-22 scroll bar Figure 17-23 draw the upper part of the ellipse again when dragging the scroll bar

Why is this happening? Please minimize the window and restore it. We can see that the image in the window is changed to the initial shape (17-24 ).

When the form is re-displayed, a point event occurs. The system calls the onpaint () method to re-paint the form.CodeExecuted again.

G. fillrectangle (brushes. lightpink,0, 0,200,150);

G. fillellipse (brushes. lightgreen,0,150,300,100);

The first statement must start with a vertex (200) and draw a rectangle of 150 pixels in width and 0,150 pixels in height. The second statement must start with a vertex, draw an ellipse with a width of 300 and a height of 100.

However, the graphics object does not know how the scroll bar changes when drawing the image. By default, it always draws the image with the "upper left corner of the work area" as the origin, that is, the coordinates of the points are always referred to in the "upper left corner of the work area. It always alignment the upper left corner of the document with the upper left corner of the work area, and then paste the document on the work area. As a result, the image shown in Figure 17-22 is re-drawn, and the image becomes initial.

When we drag the scroll bar, the painting event is triggered to re-draw the workspace, but the system does not re-draw the entire workspace. When the scroll bar is dragged down to 50 pixels, the system first translates the image in the workspace to 50 pixels, and a blank area with a size of 300 × 50 pixels appears in the lower part of the workspace (17-25 ), the system only needs to fill in this blank area. This on-demand drawing method can greatly improve the drawing efficiency.

However, the ordinate range of this blank area is 150 ~ 200. In this document, the position of the upper part of an elliptic is exactly the same. Therefore, the graphics object re-draws the upper part of an elliptic, the result is that the upper part of the ellipse appears twice (17-24 ).

(When dragging the scroll bar, the image is moved up to 50 pixels)

Figure 17-24 minimize the window and restore the image to the initial shape. Figure 17-25 as needed

In fact, the vertical coordinate range of the lower half of an ellipse is 200 ~ 250, so to correctly draw a blank area of the image, you need to translate the coordinate origin of the Drawing up 50 pixels, and this can be achieved through the coordinate translation transformation, 17-25.

Figure 17-26 coordinate translation

Coordinate translation: 17-26. To draw a region starting from point A, you need to shift the coordinate system origin from a in the upper left corner of the work area to O in the upper left corner of the document, that is, the origin of the coordinate system is always in the upper left corner of the document. This transformation can be achieved through the following statements.

G. translatetransform (this. autoscrollposition. X, this. autoscrollposition. y );

The autoscrollposition attribute indicates the position of the scroll bar. The coordinate system must translate as many pixels as the scroll bar moves. Note that both autoscrollposition. X and autoscrollposition. y are negative, so the coordinate origin is actually translated to the upper left corner.

Try: Adjust the coordinate system based on the position of the scroll bar

 Public partial class  Form1 : Form { // Constructor  Public Form1 () {initializecomponent (); // Set the background color of the form to white  This . Backcolor = Color . White; // The scroll bar is displayed when the workspace is smaller than 300x250 pixels.  This . Autoscrollminsize = New  Size (300,250 );} // Override the onpaint () method  Protected override void Onpaint (Painteventargs E ){ Base . Onpaint (E ); Graphics G = E. graphics; // Translation Coordinate System G. translatetransform ( This . Autoscrollposition. X, This . Autoscrollposition. y ); // Draw a rectangle and an ellipse G. fillrectangle ( Brushes . Lightpink, 0, 0,200,150); G. fillellipse ( Brushes . Lightgreen, 0,150,300,100 );}}

Run the program. The result 17-27 is displayed. Everything is normal.

Figure 17-27 adjust the operating result of the coordinate system based on the position of the scroll bar

Author: Liang binyu, a member of the book C #, has been published in early July for nearly five years.
BeginnerClassroom@163.com
Http://www.cnblogs.com/BeginnerClassroom