Select your preferred language

Creating a non-standard UI

Non-standard user interfaces or "skinned" applications have become much easier to create since the advent of Windows Forms programming.  This article examines a little bit of what you have to do to create an application with a completely different look to that of the everyday Windows Forms offering. 

The secret of creating a shame Windows Forms application is easy. All you have to do is provide a region that's used to define the form of the form.  The code in this simple application demonstrates this.  Figure 1 shows the circular form in action.

Figure 1. A form with a region.

You can clearly see that although the form has no finesse, the principle is simple to apply.  Note also how the region and extends over both client and non-client areas of the form.  This form has a sizable border with a standard title-bar and so these are visible across the top, at the sides and bottom of the form.  Indeed, you can still grab the title bar to move the form or the sizable borders to change the size of the form.  You'll also notice that the region chops off the buttons in the title bar and so minimizing or closing the form through that user interface is impossible.  Generally, a window will have a region which completely excludes all borders and may even suppress the user interface items such as title-bar  and buttons explicitly.   Alternatively, the application may maintain its title bar and other controls but simply hide them in the manner of the Windows Media Player that can be seen in figure 2.

Figure 2. Hiding the title bar and controls.

Clearly, in the media player application the user interface is drawn onto the client area of the form and then the sizing frame and title-bar is removed by the use of a suitable region.  Interestingly, the application has a sizing grip which is used to re-size the whole application and that close and minimize buttons are also duplicated in the client area of the form.  Particularly interesting is the fact that using the size grip changes the window region and shows that you can modify the shape of a form at any moment.  This is very useful for a dynamic interface. 

In the application that accompanies this article a user interface has been created that enables the user to resize the window by gripping the corners and the interface is made more dynamic because the form changes shape automatically to reveal a control when the mouse floats near a specific place in the form.  Figure 3 shows the user interface defined in the application. 

Figure 3. The non-standard UI.

 

Detecting the mouse in the sizing border. 

The border is drawn with a four pixel wide pen.  In order to detect the mouse in this border a GraphicsPath is used which has had the equivalent of border drawn upon it and then the Widen  method used to create a path which is effectively a thin band around the whole window.  The IsVisible method can then be used to hit test the border with the mouse coordinates.  Dragging operations are carried out by the MouseMove Handler.  In addition, the MouseMove Handler will enable the user to move the window if the mouse is clicked somewhere on the former body but outside of any contained controls or the border area. 

Dynamically changing the window region. 

As you can see from the illustration in figure 3, the user interface can change shape to display a stylized close button in the top right-hand corner.  This button will slide out from the main body of the form and slide back into hide itself when it's not required.  This is accomplished with a timer that causes the shape of the window to be recalculated from moment to moment and the window redrawn as the animation takes place.  The method in this listing is the timer Handler.  The method that calculates the shape of the window region is shown in this listing.  Finally, the method that paints the whole form including the border is shown here. 

Mouse button operations. 

The form handles mouse button clicks in a very simple manner.  The MouseDown and and the MouseUp handlers are shown here. 

Summary. 

As you can see from the rest of the code, which may be found in the code page, standard Windows Forms controls work as normal and once a form has the ability to resize itself or move itself in response to user input such as that shown in the demonstration other functionality becomes fairly trivial to implement.  Buttons on the form to be drawn using bitmap images and the user interface in general made to look very unlike anything Windows provides as standard. The media player application does not use user interface elements which are drawn ad-hoc  but uses a set of specially designed bitmap images that represent the corners, edges and other user interface elements but essentially the principles are the same.

You can find the Source Code files here.

Return to the main index.