Shaped .NET Windows Forms

Shaped .NET Windows Forms

ince the earliest versions of the Windows operating system, all Windows have been rectangular. However, the number of applications that break out of this boring mold is rising. Even Microsoft, the king of rectangularity, is starting to create applications that use shaped windows, such as Media Player. Unfortunately, creating shaped forms has always been quite tricky. Until now that is! The .NET Framework and the Windows Forms package in particular make it easy to produce forms that have rather sophisticated shapes.

Since I already brought it up, I am going to stick to Windows Media Player as an example. You are likely to have Media Player on your computer, so you can easily try out some of the things I will point out to you. Also, Media Player incorporates a number of different techniques that make for excellent examples.

This article will demonstrate how to build shaped forms with shaping-functionality very similar to Windows Media Player. Before I show you that kind of advanced functionality let me walk you through some of the basics.

Our First Shaped Form
The general principle of a shaped form is simple. You need to define the outline of the form based on vectors and assign that definition to the form.

Form shapes are defined by Regions. Region is a .NET Framework class. Every Windows Form has a member object called Region, but by default, Windows Forms do not have custom regions assigned. The object reference is null (C#) or Nothing (VB.NET). In this case the form will appear rectangular (Windows XP themes may actually alter a form’s appearance, but I will ignore this detail here).

To change the shape of a form you can instantiate a Region class and fill it with information about the shape you want to assign to the form. The easiest way to do that is to use a GraphicsPath object. GraphicsPath is a GDI+ class that you’ll find in the System.Drawing.Drawing2D namespace. The concept of a GraphicsPath is very simple. It is capable of describing a vector-based shape. Just what you need to define the outline of your form! The defined path (see the GDI+ sidebar) is handed to the constructor of the Region object, which will automatically convert that path information into region data. You’ll assign the region data to the form, and voila, the form changes its shape.

Luckily, for simple shapes things are pretty straightforward. .NET’s GraphicsPath class is rather powerful and some of its methods are very sophisticated. To shape the forms presented in this article, however, I’m going to stick to simple paths composed out of lines and arcs.

Create an Elliptical Form
For my first example I’m going to create an elliptical form. I’ll start out by creating a new Visual Basic .NET Windows Form project. Visual Studio .NET will create a default rectangular form. An elliptical form requires a simple graphics path that you can create with a single call to the AddEllipse() method of a GraphicsPath object. GraphicsPaths have a number of methods that you can use to add additional segments to the vector-based definition of the path. I’ll show you more advanced uses of that later in this article. For now, however, all you want is a single ellipse that defines the entire path. This example shows you how to create the path and how to add a small ellipse:

   Dim oPath As New GraphicsPath()   oPath.AddEllipse(0, 0, 200, 100)

This defines an ellipse starting at position 0,0 (the top-left corner of the form or drawing surface), and has a width and height of 200 and 100 pixels respectively.

Note that you need to import the System.Drawing.Drawing2D namespace in order to compile this code snippet successfully:

   Imports System.Drawing.Drawing2D

You do not need to add a project reference to this assembly because all Windows Forms applications automatically reference this namespace.

There are several overloads for the AddEllipse() method. One of them allows you to pass a Rectangle object rather than individual coordinates. This is handy if you want to add an ellipse of the same size as the form since each Windows Form has a ClientRectangle member:

   Dim oPath As New GraphicsPath()   oPath.AddEllipse(Me.ClientRectangle)

You can use this path, turn it into a Region, and assign it to the form. The following example utilizes the form’s Load event:

   Private Sub Form1_Load(   ByVal sender As System.Object, _   ByVal e As System.EventArgs) _   Handles MyBase.Load   Dim oPath As New GraphicsPath()   oPath.AddEllipse(Me.ClientRectangle)   Me.Region = New Region(oPath)   End Sub

Before I proceed I would like to point out that the Visual Basic .NET IntelliSense feature will not show the Region or the ClientRectangle members of the form. This is an IDE limitation and you’ll find that the code above compiles without a problem.

DevX Note: You can see the Region and ClientRectangle members in VB.NET if you change your options. To do that, select Options from Visual Studio’s Tools menu, and then open the Text Editor item. Select All Languages (or just Basic if you want to limit the effects to VB.NET) and uncheck the “Hide advanced members” checkbox. Click OK to close the Options dialog. The change takes effect immediately.

The C# IntelliSense, on the other hand, exposes these members as expected. Beyond that, however, the differences between the two languages are minimal. Consider the following example, which is the C# version of the simple elliptical form:

   private void Form1_Load(object sender,   System.EventArgs e)   {   GraphicsPath oPath = new GraphicsPath();   oPath.AddEllipse(this.ClientRectangle);   this.Region = new Region(oPath);   }
Figure 1: Our first example: an elliptical form.

Since the differences between the two languages are so insignificant in this case, I will stick to VB.NET examples in this article. I am sure the C# developers among you will have no problem figuring out your version of the code.

Now that you’ve assigned the region to the form in the Load event, you can run the application. Figure 1 shows the result. (I added a “Close” button.) One of the first things you notice is that the form looks somewhat “odd.” Like every other Windows form, it has a title bar. However, the ellipse slices right through that, cutting it off at both ends. That’s not particularly professional.

Figure 2: During design time, all shaped forms appear rectangular.

Another detail you may have noticed is that the form appears rectangular during design time (see Figure 2). That’s normal. It makes positioning controls on a shaped form a bit tricky, but beyond that you can design and program your form like any other form including setting the size, dropping controls, and wiring up event code.

Let’s fix the title bar problem. In general, most shaped forms don’t have a title bar drawn by the operating system. Some shaped forms have fancy, twisted title bars. Those are usually created by a graphic artist and placed on the form as a bitmap. Some applications can run in different modes where the title bar is hidden when the form runs in shaped mode, but it is visible in a more conventional rectangular mode. Windows Media Player is a good example for that (see Figure 3 and Figure 4).

Figure 3: Windows Media Player running in shaped mode.
Figure 4: Windows Media Player in “rectangular mode”. You can clearly see that the shaped version is a sub-set that is cut out of the rectangular window.

As you can see in this instance, shaped forms are usually “cut out” of the larger window below the title bar. You can do the same thing using the elliptical form. The following code snipped adjusts for the size of the title bar as well as window borders:

   ' Calculate the dimensions of the ellipse   Dim iElTop, iElLeft, iElHeight, iElWidth _   As Integer   iElTop = SystemInformation.BorderSize.Height +    _   SystemInformation.CaptionHeight + 2   iElLeft = SystemInformation.BorderSize.Width + 2   iElHeight = Height - iElTop - _   SystemInformation.BorderSize.Height - 3   iElWidth = Me.Width - iElLeft - _   SystemInformation.BorderSize.Width - 3   ' Create the graphics path and   ' set its dimensions   oPath = New GraphicsPath()   oPath.AddEllipse(iElLeft, iElTop, _   iElWidth, iElHeight)

The code used here looks a bit more sophisticated than it really is. Most of the code deals with using the SystemInformation class (and its static methods) to query information such as the height of the title bar.

If you run this code you will see a form that is still elliptical but slightly smaller than the previous version. It looks better?still not very good?but better, since the title bar is no longer visible. This introduces another problem though: You cannot move the form anymore because the only way in Windows to move a form is by grabbing it on the title bar.

Making It Behave Right
Most shaped windows solve the movement problem by allowing the user to move the form by clicking anywhere on the form’s background and dragging it to its new position. Listing 1 shows the implementation of that solution. Note that this code is useful for all shaped forms you might ever create. Therefore, I’ve created a new form class called ShapedForm, which all forms will subsequently inherit from in all the remaining examples in this article.

I implemented the move functionality using the form’s native mouse events. When the MouseDown event occurs on the form it sets a flag indicating that it’s in “moving mode.” At this point the form also records the mouse’s location within the form. The MouseMove event checks whether the form is in “moving mode,” and if it is, the form gets moved to the new mouse location. The original mouse position within the form has to be considered, otherwise, the form’s top, left corner would jump to the mouse position. Once the MouseUp event occurs, “moving mode” gets turned off so future mouse move events will not move the form anymore.

The ShapedForm class not only implements the move behavior, but also provides standard functionality that allows you to create a simple path object by overriding the SetInitialFormShape() method. This method is expected to create the oFormPath member of the form (which is a GraphicsPath object). If that object is present, the form will automatically assume its shape. The form also remembers the previous shape (most likely the plain rectangular shape), and features methods to reset the form’s shape to its previous appearance.

Making It Look Good
At this point you have a shaped form that behaves the way you’d expect it to. However, the form still doesn’t look very professional. One reason is that the form doesn’t have a border. Unfortunately there is no easy way to add a border to a shaped form. Windows itself only renders borders for rectangular forms. And as with most shaped forms, drawing a border isn’t easy in our elliptical example.

Figure 5 shows a new elliptical form with a blue background and a simple border rendered around it. The border is a very simple 3D effect. I kept things simple in order to keep the example easy to follow (and I’m a lousy artist). The border is rendered in the Paint event of the form. I use GDI+ to use an elliptical graphics path (similar to the path used to create the form, but slightly smaller) and have it render repeatedly in different colors.

At the top left corner I start with a light blue shade. Then I use a dark blue pen to render the ellipse shifted several pixels to the bottom and to the right, and finally I render the ellipse in the center of the form using a medium-blue brush to create the desired form background. This results in a three-dimensional border effect. (You may have to look very closely at the image to actually see it). In a real form you should experiment with a number of different ellipses using different colors, and perhaps even paths that utilize a gradient fill (see the GDI+ sidebar).

Listing 2 shows the sample code that generates the form shown in Figure 5. This form is a subclass of our ShapedForm class in order to exhibit the behavior we programmed above.

Note: Another way to graphically display a border is to provide it as part of a background image. In fact, most professional applications that use shaped forms seem to take that approach. I’ll explore that possibility later.

Building a Complex Shape

Figure 6: Although this looks like text printed on the desktop background, this is a shaped form. The button in the “D” gives it away.

Now that you understand the basics, it’s time to build a form with a more complex shape. This is accomplished by adding many smaller line segments together when building the GraphicsPath. The GraphicsPath object provides a number of methods to do this, including methods to add straight lines (AddLine()), curves (AddArc(), AddCurve(),…), and much, much more. There is even a method to add strings of a certain font and size (AddString()), which results in a vector representation of the string sent to the method. Figure 6 shows a form shaped based on the outline of a string. It looks a bit like some text printing on the desktop background, but it is actually a shaped form! Listing 3 shows the code required to build this form.

So far (aside from Listing 3), you’ve only seen the AddEllipse() method, which created a self contained path that formed a full circle. In other words, it formed a “closed” path where the start-point and the end-point are the same. When you create paths out of many smaller shapes, it’s important that you ultimately close that shape. Luckily, the GraphicsPath object has methods (CloseAllFigures()) to close shapes automatically.

Figure 7: Windows Media Player with a classic skin.

At this point I want to return your attention to the Media Player example. I want to show you how you can create a form like Windows Media Player using .NET Windows Forms. You probably know that Windows Media Player supports a feature called skins that allow the user to change the shape of the application window entirely (among other things). I picked one of the classic shapes shown in Figure 7.

What is interesting about this skin is not only its shape, but that it has panels that you can expand and collapse. Figure 8 shows Media Player with all panels expanded.

Figure 8: Media Player with expanded panels.

In order to build a similar form you need to create a fairly complex shape. As you can see in Figure 7 and Figure 8, the form uses a large number of arcs connected by straight lines. One of the nice things about the GraphicsPath object is that it is smart enough to connect individual segments using straight lines in case the starting point of the next segment is not the same as the end point of the previous one. Therefore, you can describe the shape by sticking (almost exclusively) to adding arcs to the path. The CreateShape() method (Listing 4) shows how the path is created.

By default the form is shown with its panels collapsed. Two fields on the form (bRightPanelVisible and bBottomPanelVisible) define whether either one of those panels is visible. If they are visible, the path is created differently to accommodate the new shape of the form. This allows you to call the CreateShape() method at any time to generate a new shape, and then use the AssignShapePath() method to change the shape of the form. In fact, the code uses this approach whenever the user clicks in certain areas of the form. The idea is to trap mouse clicks that occur whenever the user clicks the mouse where the handles of the panels are. When this happens, you toggle the fields to show the clicked panel in the opposite state, recreate the shape, and assign it to the form.

Note: Windows Media Player slides panels out of the main form. In our example, the panels just jump out. You could create the slide effect by changing the shape gradually. This would actually be relatively straightforward to implement. However, I decided not to show the technique here in order to keep the example to a reasonable size.

Figure 9: Our very own form exposing behavior similar to Windows Media Player.

OK, you’ve got a fancy shape but it still isn’t very exciting because the window appears as an oddly shaped gray “blob” on the screen. What you need to make this look good are background images. In this example I’m going to add four different images. One with all panels collapsed, one with all of them expanded, and one each for each panel expanded on its own. The easiest way to create background images is to run the form with its “naked” shape, then take a screen shot of that form, and then use a graphics program to create the image that exactly matches the shape of the form. It is very important that the image matches exactly?otherwise there will be white pixels around the edges of your form, which makes it look unprofessional.

Most graphics programs allow you to apply textures and effects such as 3D borders. Following the procedures I described above, I created the background images used in the forms shown in Figure 9 and Figure 10. The images are pre-loaded when the form starts, and are ready to be assigned to the BackgroundImage member of the form. You do this in the SetBGImage() method that fires whenever the user clicks on a panel.

Voila! Our first complex shaped form is complete!

Figure 10: Our complex shaped form with both panels expanded.

Creating shaped forms is a rather straightforward task from a programmer’s point of view. Things really only get tricky when the vector-based description of the form’s outline gets complex. You will need a graphic artist to produce the background images for your forms unless you have a good amount of artistic talent yourself. This is especially true if you create forms that can change their shape dynamically, maybe even in an animated fashion.

Now that you know how to build shaped forms, you’ll notice that standard windows controls look horribly out of place when you put them on a shaped form. Imagine the Windows Media Player with a rectangular “Play” button! Plan for the time to create more art for your buttons and other controls.

Please contact me if you have questions. Also, let me know what uses you come up with for shaped forms!



Share the Post:
Poland Energy Future

Westinghouse Builds Polish Power Plant

Westinghouse Electric Company and Bechtel have come together to establish a formal partnership in order to design and construct Poland’s inaugural nuclear power plant at

EV Labor Market

EV Industry Hurting For Skilled Labor

The United Auto Workers strike has highlighted the anticipated change towards a future dominated by electric vehicles (EVs), a shift which numerous people think will

Soaring EV Quotas

Soaring EV Quotas Spark Battle Against Time

Automakers are still expected to meet stringent electric vehicle (EV) sales quotas, despite the delayed ban on new petrol and diesel cars. Starting January 2023,

Affordable Electric Revolution

Tesla Rivals Make Bold Moves

Tesla, a name synonymous with EVs, has consistently been at the forefront of the automotive industry’s electric revolution. The products that Elon Musk has developed

Poland Energy Future

Westinghouse Builds Polish Power Plant

Westinghouse Electric Company and Bechtel have come together to establish a formal partnership in order to design and construct Poland’s inaugural nuclear power plant at the Lubiatowo-Kopalino site in Pomerania.

EV Labor Market

EV Industry Hurting For Skilled Labor

The United Auto Workers strike has highlighted the anticipated change towards a future dominated by electric vehicles (EVs), a shift which numerous people think will result in job losses. However,

Soaring EV Quotas

Soaring EV Quotas Spark Battle Against Time

Automakers are still expected to meet stringent electric vehicle (EV) sales quotas, despite the delayed ban on new petrol and diesel cars. Starting January 2023, more than one-fifth of automobiles

Affordable Electric Revolution

Tesla Rivals Make Bold Moves

Tesla, a name synonymous with EVs, has consistently been at the forefront of the automotive industry’s electric revolution. The products that Elon Musk has developed are at the forefront because

Sunsets' Technique

Inside the Climate Battle: Make Sunsets’ Technique

On February 12, 2023, Luke Iseman and Andrew Song from the solar geoengineering firm Make Sunsets showcased their technique for injecting sulfur dioxide (SO₂) into the stratosphere as a means

AI Adherence Prediction

AI Algorithm Predicts Treatment Adherence

Swoop, a prominent consumer health data company, has unveiled a cutting-edge algorithm capable of predicting adherence to treatment in people with Multiple Sclerosis (MS) and other health conditions. Utilizing artificial

Personalized UX

Here’s Why You Need to Use JavaScript and Cookies

In today’s increasingly digital world, websites often rely on JavaScript and cookies to provide users with a more seamless and personalized browsing experience. These key components allow websites to display

Geoengineering Methods

Scientists Dimming the Sun: It’s a Good Thing

Scientists at the University of Bern have been exploring geoengineering methods that could potentially slow down the melting of the West Antarctic ice sheet by reducing sunlight exposure. Among these

why startups succeed

The Top Reasons Why Startups Succeed

Everyone hears the stories. Apple was started in a garage. Musk slept in a rented office space while he was creating PayPal with his brother. Facebook was coded by a

Bold Evolution

Intel’s Bold Comeback

Intel, a leading figure in the semiconductor industry, has underperformed in the stock market over the past five years, with shares dropping by 4% as opposed to the 176% return

Semiconductor market

Semiconductor Slump: Rebound on the Horizon

In recent years, the semiconductor sector has faced a slump due to decreasing PC and smartphone sales, especially in 2022 and 2023. Nonetheless, as 2024 approaches, the industry seems to

Elevated Content Deals

Elevate Your Content Creation with Amazing Deals

The latest Tech Deals cater to creators of different levels and budgets, featuring a variety of computer accessories and tools designed specifically for content creation. Enhance your technological setup with

Learn Web Security

An Easy Way to Learn Web Security

The Web Security Academy has recently introduced new educational courses designed to offer a comprehensible and straightforward journey through the intricate realm of web security. These carefully designed learning courses

Military Drones Revolution

Military Drones: New Mobile Command Centers

The Air Force Special Operations Command (AFSOC) is currently working on a pioneering project that aims to transform MQ-9 Reaper drones into mobile command centers to better manage smaller unmanned

Tech Partnership

US and Vietnam: The Next Tech Leaders?

The US and Vietnam have entered into a series of multi-billion-dollar business deals, marking a significant leap forward in their cooperation in vital sectors like artificial intelligence (AI), semiconductors, and

Huge Savings

Score Massive Savings on Portable Gaming

This week in tech bargains, a well-known firm has considerably reduced the price of its portable gaming device, cutting costs by as much as 20 percent, which matches the lowest

Cloudfare Protection

Unbreakable: Cloudflare One Data Protection Suite

Recently, Cloudflare introduced its One Data Protection Suite, an extensive collection of sophisticated security tools designed to protect data in various environments, including web, private, and SaaS applications. The suite

Drone Revolution

Cool Drone Tech Unveiled at London Event

At the DSEI defense event in London, Israeli defense firms exhibited cutting-edge drone technology featuring vertical-takeoff-and-landing (VTOL) abilities while launching two innovative systems that have already been acquired by clients.

2D Semiconductor Revolution

Disrupting Electronics with 2D Semiconductors

The rapid development in electronic devices has created an increasing demand for advanced semiconductors. While silicon has traditionally been the go-to material for such applications, it suffers from certain limitations.

Cisco Growth

Cisco Cuts Jobs To Optimize Growth

Tech giant Cisco Systems Inc. recently unveiled plans to reduce its workforce in two Californian cities, with the goal of optimizing the company’s cost structure. The company has decided to

FAA Authorization

FAA Approves Drone Deliveries

In a significant development for the US drone industry, drone delivery company Zipline has gained Federal Aviation Administration (FAA) authorization, permitting them to operate drones beyond the visual line of

Mortgage Rate Challenges

Prop-Tech Firms Face Mortgage Rate Challenges

The surge in mortgage rates and a subsequent decrease in home buying have presented challenges for prop-tech firms like Divvy Homes, a rent-to-own start-up company. With a previous valuation of

Lighthouse Updates

Microsoft 365 Lighthouse: Powerful Updates

Microsoft has introduced a new update to Microsoft 365 Lighthouse, which includes support for alerts and notifications. This update is designed to give Managed Service Providers (MSPs) increased control and

Website Lock

Mysterious Website Blockage Sparks Concern

Recently, visitors of a well-known resource website encountered a message blocking their access, resulting in disappointment and frustration among its users. While the reason for this limitation remains uncertain, specialists