Regions, Nonrectangular Forms, and Controls in GDI+

This article has been excerpted from book "Graphics Programming with GDI+".

When we're writing Windows applications with drawing functionality, it becomes important to understand the roles of regions, client areas, and nonclient areas. This section will describe an exciting and wonderful use of regions.

Figure 6.18 shows a typical rectangular form. As you can see, the title bar area usually contains the title of the form, as well as minimizes, maximize, and close buttons. This is the nonclient area; the rest of the form is the client area. Graphics object can be drawn only in the client area. The combination of both client and nonclient areas is the default region of a form.

What exactly is a region? A region is a collection of pixels that represents parts of a control. GDI+ is responsible only for drawing the region associated with a window (a form or control). The default region of a window includes both client and nonclient areas, so GDI+ draws the entire window.

FIGURE 6.18: Client and nonclient areas of a form.

However, you can force the operating system to display only part of a window. This is where regions are useful.

The Application

This section will show you the importance of regions and how you can use them in real-world applications.

Have you ever thought about writing nonrectangular forms or controls? How about writing circular, triangular, or polygonal forms, buttons, labels, or text boxes? Our example is a Windows application in which the user can select the shape of the form. The user will have options to change the default rectangular form to a circular, triangular, or polygonal form. You will also learn how to create nonrectangular controls such as buttons.

How can we write nonrectangular forms and controls? GDI+ draws only the regions associated with a form or a control. But setting a nonrectangular region should do the trick. This is what we will do in our application. One of the nonrectangular forms of the final application might look like Figure 6.19. As you can see, this technique can be used to build cool looking Windows applications.

FIGURE 6.19: A nonrectangular form and controls

Coding

In Windows Forms, every control, including a form, is derived from the Control class. The Region property of the control class represents the region of control. If you set the Region property of a control, only the area covered by that region will be visible to the user. Sections 6.5.2.1 through 6.5.2.6 describe the steps involved in writing code for nonrectangular shapes.

Step1: Create the Application

We create a Windows application, put the three controls on the form, and change the Text properties of the buttons. We also add a context menu and four menu items, as Figure 6.20 shows. In addition, we add menu and button click event handlers.

Step2: Add the Shape Class

Now we add a class to the project. Our class name is Shape, as Listing 6.15 shows. We add two methods to this class: GetPolyRegion and GetRectRegion. Both of these methods return a Region object. The GetPolyRegion method takes an array of Point objects as its only argument. We create a graphics path from the points by calling AddPolygon. After that we create a region from the path and return it. Similarly, we create a region from a rectangle in the GetRectRegion method.

FIGURE 6.20: The nonrectangular forms application

LISTING 6.15: The Shape class

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Windows.Forms;

using System.Drawing.Drawing2D;

namespace WindowsFormsApplication2

{

    public partial class Form1 : Form

    {

        public Form1()

        {

            InitializeComponent();

        }

        //The Shape class contains the functionality of shaped controls

        public class Shape

        {

            public Shape()

            {

            }

            public Region GetPolyRegion(Point[] pts)

            {

                //Create a graphics path

                GraphicsPath path = new GraphicsPath(FillMode.Alternate);

                path.AddPolygon(pts);

                //Create a Region object from the path and set it as the form's region

                Region rgn = new Region(path);

                return rgn;

            }

            public Region GetRectRegion(Rectangle rct)

            {

                //Create a graphics path

                GraphicsPath path = new GraphicsPath(FillMode.Alternate);

                path.AddEllipse(rct);

                //Create a Region object from the path and set it as the form's region

                Region rgn = new Region(path);

                return rgn;

            }

        }

    }

}

Step 3: Load the Context Menu

Now we load the context menu on the right mouse click of the form. In Listing 6.16, we set the ContextMenu property of the form as the context menu control.

LISTING 6.16: The mouse-down click event handler

            private void Form1_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)

            {

                if (e.Button == MouseButtons.Right)

                {

                    this.ContextMenu = this.contextMenu1;

                }

            }

Step 4: Call the Shape Class Methods

Now we call GetRectRegion and GetPolyRegion from the context menu click event handlers to get the region for a rectangle or a polygon. After getting a Region object corresponding to a rectangle or a polygon, we just need to set the Region property of the form. Listing 6.17 shows the code for the context menu click event handlers.

LISTING 6.17: Menu item click event handlers

        private void CircleMenu_click(object sender, Sytem.EventArgs e)

        {

            //Create a rectangle

            Rectangle rect = new Rectangle(50, 0, 300, 300);

            //Create a Shape object and call the GetRecRegion method

            Shape shp = new Shape();

            this.Region = shp.GetRectRegion(rect);

            this.Backcolor = Color.BurlyWood;

        }

private void RectMenu_Click(object sender System.EventArgs e)

        {

             //A Points array for a rectangle

            //Same points as the original form

            Point[] pts =

             new Point (0, 0),

             new Point (0, originalSize.Height),

             new Point (originalSize.Width, originalSize.Height),

            new Point (originalSize.Width, 0)

            };

             //Create a shape object and call the GetPolyRegion method

            Shape shp = new Shape();

             this.Region = shp.GetPolyRegion(pts);

             //Set background color

             this.BackColor = Color.DarkGoldenrod;

        }

private void TriangleMenu_Click(object sender, System.EventArgs e)

        {

            //Add three lines to the path representing three sides of a triangle

            Point[] pts =

        {

                new Point (50,0),

                new Point (0,300),

                new Point (300,300),

                new Point (50,0)

        };

            this.BackColor = Color.CornflowerBlue;

            //Create a Shape object and call the GetPolyRegion method

            Shape shp = new Shape();

            this.Region = shp.GetPolyRegion(pts);

        }

The code in Listing 6.18 for the Close menu item simply closes the form.

LISTING 6.18: The Close menu click event handler

        private void CloseMenu_click(object sender, System.EventArgs e)

        {

            this.Close();

        }

Step 5: Display Nonrectangular Shapes

Using similar methods, you can set the Region property of controls such as Button or TextBox to display nonrectangular shapes. If you don't want to use the Shape class, you can directly set the Region property of a control. Listing 6.19 sets the Region properties of three buttons. We write this code on the form's load event handler.

LISTING 6.19: Setting the Region properties of buttons

            originalSize = this.Size;

            //Create a REgsion object from the path

            GraphicsPath path1 = new GraphicsPath(FillMode.Alternate);

            path1.AddEllipse(new Rectangle(30, 30, AudioBtn.Width - 60, AudioBtn.Height - 60));

            AudioBtn.Region = new Region(path1);

            GraphicsPath path2 = new GraphicsPath(FillMode.Alternate);

            path2.AddEllipse(new Rectangle(30, 30, VideoBtn.Widht - 60, VideoBtn.Height - 60));

            VideoBtn.Region = new Region(path2);

            GraphicsPath path3 = new GraphicsPath(FillMode.Alternate);

            path3.AddEllipse(new Rectangle(20, 20, VideoBtn.Width - 40, VideoBtn.Height - 40));

            AnimationBtn.Region = new Region(path3);

Step 6: Build and Run

The last step is to run the application and right-click on the form. Figure 6.21 shows the result of selecting the Circle menu option.

Figure 6.22 shows the result of selecting the Triangle menu option.

Using this technique, you can build Windows forms and controls of virtually any shape.

FIGURE 6.21: A Circular form

FIGURE 6.22: A triangular form

Conclusion

Hope the article would have helped you in understanding the Regions, Nonrectangular Forms, and Controls in GDI+. Read other articles on GDI+ on the website.

This book teaches .NET developers how to work with GDI+ as they develop applications that include graphics, or that interact with monitors or printers. It begins by explaining the difference between GDI and GDI+, and covering the basic concepts of graphics programming in Windows.