You may come across plenty of Non-Rectangular window or user interaction dialogs in your experience. Many of mp3 players in the market provide a non-rectangular fancy UI.
In this article, we will create a round-shaped dialog with a username and password fields in it. The technique is very simple. Perform your drawing as usual and then use the CRgn class to create a region from your drawing. Then you can ask the window to have the boundaries defined by the CRgn object.
2. Create the Sample dialog
Create a dialog-based application and name it as RoundWind. Once the dialog is created, resize it to 247x129. Then position the controls in the dialog as shown below:
We are going to display the controls in this dialog, as they exist in the elliptical dialog box. Once the dialog based application is ready with the controls, we can start defining the path for the region. Actually, a region can be created in multiple ways and in this example, we are going to create a region from a path. Let us move to the coding part of this.
3. Modify the CDialog derived class
Switch to class view. We are going to make modification on the dialog class to create a round window. In our example, the dialog class is CRoundWndDlg. This is shown below:
3.1 Declare CRgn memberIn the Header file of the CroundWindDlg add two members. One is for the client device context (CClientDC) and another one is to specify the region (CRgn) using the client device context. These declarations are shown below:
//Sample 01: Declare a device context and a Region instance
CClientDC * m_clientDC;
3.2 Define a Path using BeginPath & EndPathIn the OnInitDialog of the dialog class, define the path using the CClientDC supplied drawing function. To make the example simple, I used the ellipse function. But, you can use the MoveTo, LineTo, and ArcTo etc., to define a complex path for the region. Look at the below piece of code:
//Sample 02:Create the device context and define the path for the region
m_clientDC = new CClientDC(this);
3.3 Define Region using PathNote that the drawing function Ellipse is enclosed in between BeginPath and EndPath. The drawing that is enclosed between BeginPath and EndPath will form the path for defining the Region. The below code shows how a region is defined:
//Sample 03:Create the region from the path
In our example, we created the region from the path which available through the CClientDC. The CreateFromPath takes the device context object and extracts the path specified in it. Once a region is ready we can set that to any Window. In our case, we want to display the dialog as a round window and hence we are calling the SetWindowRgn function. As the function expects the Window Handle to the Region we extracted that from the CRgn instance using the (HRGN) m_rgn in-built casting operator. The second parameter TRUE specifies that we want to redraw the dialog instance.
When we execute the code the output looks like the below one:
Source Code: Download