Click here to Skip to main content
11,720,547 members (66,788 online)
Click here to Skip to main content

Shape Control for .NET

, 28 Apr 2014 CPOL 145K 6.7K 146
Rate this:
Please Sign up or sign in to vote.
Implementing shape control that supports transparency and custom design-time editors.

Introduction

When Microsoft upgraded Visual Studio 6 to Visual Studio 7 (.NET), many of the familiar graphical controls (Image control, Shape control) were dropped. Although similar functionalities previously achieved by these controls can be attained using appropriate classes in the .NET library, much more effort is required.

After getting familiar with graphical programming in .NET, I am able to port most of my VB6 graphical programs to C#. However, I find that time and again, I need to implement replacement functionalities for the VB6 Shape control in .NET. There are probably already many Shape controls for .NET by third parties, but I could not find one to my satisfaction.

In this article, I would like to share with the readers how I attempted to implement the Shape control for .NET.

Background

In VB6, the Shape control is a graphical light-weight control, it is not a real control and does not have a Hwnd property. In .NET, all controls are real controls with Hwnd property. Although there is no equivalent Shape control in Visual Studio .NET, there are various classes in the .NET library that can collectively be used to implement the Shape control.

Basically the Shape control is an image with a certain shape. To handle the image functionalities, there are the Image and Bitmap classes. For shapes, there is the GraphicsPath class.

These classes are the key components for implementing the Shape control.

Transparency

In VB6, we can set the DrawMode property to achieve the effect of seeing through the VB6 Shape control. The DrawMode property could still be implemented using GDI/GDI+ functions in .NET, but there is an easier and more elegant way. .NET supports 32 bit ARGB rendering. In VB6, although 32 bit ARGB values can be assigned to colors, the A (Alpha) component of the value is never used.

For any standard control derived from System.Windows.Form.Control, there are at least two properties that take Color values: BackColor and ForeColor. Each of these properties can be assigned ARGB values.

How would you test for transparency? The answer is a background. All controls must reside within a container. For most cases, the form is the container. However, there are also controls that serve as containers, for example the Panel control. To test for transparency, we can set the container's background to an image and the backcolor of the control within the container to a color where the Alpha is less than 255 (maybe 100). You will then be able to see the background image through the control. The lower the Alpha, the more of the background is seen.

Shape

In VB6, we can also create custom controls with different shapes. However this can only be done by calling Win32 API functions. In .NET, every control has a Region property which can be used to specify its shape. When the control is rendered, Windows will only paint on pixels within the region. A Region can be created by specifying its outline. The outline can be constructed using a GraphicsPath object. The code below creates a GraphicsPath object, adds an ellipse shape to the path and then uses the path to instantiate a new Region object to be assigned to a control's Region property. The end result is that the control will take the shape of the Region, which in this case is an ellipse.

GraphicsPath _outline=new GraphicsPath();

_outline.AddEllipse(0,0,100,100);

this.Region=new Region(_outline);

Custom Design-time Editors

When you use Visual Studio .NET IDE to assign Color properties, you can do so using the standard Color Editor where you can select from a series of colors, or you can directly type in the ARGB values. When you use the standard Color Editor, you cannot specify the Alpha values. And when you directly type in the ARGB values, you do not know how the color will appear. Either way, you do not have an ideal way to enter Color values.

However, Visual Studio .NET allows you to create your own editor to edit property values. For the Shape control, I have created two custom design-time editors. One for editing ARGB values and the other to pick the shape for the Shape control.

In this article, I would not be discussing on how to create a custom design-time editor. You can get more information from the .NET documentation for System.Drawing.Design namespace.

Sample screenshotSample screenshot

Extending Shape Control

The source code for the Shape control (ShapeControl.cs) allows for easy addition/deletion of shapes. All shapes are enumerated in the ShapeType enum block. You can edit this block to add/delete shapes.

public enum ShapeType{
                Rectangle,
                RoundedRectangle,
                Diamond,
                Ellipse,
                TriangleUp,
                TriangleDown,
                TriangleLeft,
                TriangleRight,
                BallonNE,
                BallonNW,
                BallonSW,
                BallonSE,
                CustomPolygon,
                CustomPie
            }

Correspondingly add/edit the block that creates the outline path for the shape.

internal static void updateOutline(ref GraphicsPath outline, 
                     ShapeType shape, int width,int height)
{
    Switch (Shape)
    {
        Case ShapeType.CustomPie:
            outline.AddPie(0,0,width,height,180,270);
            break;
        Case ShapeType.CustomPolygon:
            outline.AddPolygon(new Point[]{
                          new Point(0,0),
                          new Point(width/2,height/4),
                          new Point(width,0),
                          new Point((width*3)/4,height/2),
                          new Point(width,height),
                          new Point(width/2,(height*3)/4),
                          new Point(0,height),
                          new Point(width/4,height/2)
                                          }
                );
            break;
        Case ShapeType.Diamond:
            outline.AddPolygon(new Point[]{
                        new Point(0,height/2),
                        new Point(width/2,0),
                        new Point(width,height/2),
                        new Point(width/2,height)
                                          });
            break;

        Case ShapeType.Rectangle:
            outline.AddRectangle(new Rectangle(0,0,width,height));
            break;
        .....

The shape selection design-time editor is coded in such a way that it queries the ShapeType enum and calls the updateOutline function while rendering the the design-time UI. It will automatically display the shapes correctly.

ShapeImage Property

I have added a ShapeImage property that allows you to specify an image that you would like to use for generating the outline for the Shape control. A suitable image would be one with clear outline, like those included in the project's resources. The above picture shows the setting of the ShapeImage property of a Shape control to take the shape of a butterfly. Note that the ShapeImage property will override the Shape property. If you want to use the Shape property, first set ShapeImage property to (none).

The outline extraction implementation for the ShapeImage property is based on the my article

Fun with Outlines http://www.codeproject.com/Articles/760660/Fun-with-Outlines .

Demo Sample Application

This is created to show the features of the shape control. The left panel demonstrates transparency as you drag the diamond shape around the panel. The other shape controls show the various different shapes and settings.

Conclusion

I hope that the readers would benefit not only from using the shape control to create fanciful UI, but also from their exploration of the various .NET classes used to create the magic of the shape control.

History

20 April 2014 : Updated Shape Type (Property) Editor to work correctly in Visual Studio 2008 and later

29 April 2014 : Add in ShapeImage property.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Yang Kok Wah
Software Developer (Senior)
Singapore Singapore
Yang Kok Wah is a Software Specialist in a leading System/Solution Integration Company in Singapore. He has more than 20 years experience in software development, specializing in areas of Biometrics, Smartcards and Image Processing. He has worked with VB, C#, Java and C/C++. He graduated from University of London with BSc(Hons) in Computing and also holds a Business Administration degree from National University of Singapore.

He likes Graphics, Games, AI and Image Processing.

You may also be interested in...

Comments and Discussions

 
Generalgreat article. thank You! Pin
tigerwood200623-Oct-14 15:10
membertigerwood200623-Oct-14 15:10 
GeneralMy vote of 5 Pin
Volynsky Alex20-Apr-14 21:32
professionalVolynsky Alex20-Apr-14 21:32 
QuestionThanks for this nice control Pin
mat7618-Feb-14 17:06
membermat7618-Feb-14 17:06 
QuestionHow to show shapes above other controls when they are overlapped Pin
kwekey18-Apr-12 5:35
memberkwekey18-Apr-12 5:35 
AnswerRe: How to show shapes above other controls when they are overlapped Pin
Yang Kok Wah20-Apr-12 0:23
memberYang Kok Wah20-Apr-12 0:23 
QuestionAbout License ? Pin
jayyang27-Dec-10 17:20
memberjayyang27-Dec-10 17:20 
AnswerRe: About License ? Pin
Yang Kok Wah28-Dec-10 15:28
memberYang Kok Wah28-Dec-10 15:28 
QuestionShape Control integration in a GPL project? Pin
seeseekey8-Dec-10 3:42
memberseeseekey8-Dec-10 3:42 
GeneralMemory [modified] Pin
tcholzer24-Sep-09 7:24
membertcholzer24-Sep-09 7:24 
GeneralCorrection in my previous post Pin
yogeshcprajapati@hotmail.com Yogesh18-Aug-09 7:05
memberyogeshcprajapati@hotmail.com Yogesh18-Aug-09 7:05 
GeneralBadge Designer Pin
yogeshcprajapati@hotmail.com Yogesh18-Aug-09 6:59
memberyogeshcprajapati@hotmail.com Yogesh18-Aug-09 6:59 
GeneralRe: Badge Designer Pin
Yang Kok Wah18-Aug-09 17:34
memberYang Kok Wah18-Aug-09 17:34 
GeneralHi Dear Pin
mdrizwan_119-Jul-09 19:10
membermdrizwan_119-Jul-09 19:10 
GeneralRe: Hi Dear Pin
sonu kumar29-Apr-14 3:05
membersonu kumar29-Apr-14 3:05 
GeneralKeyDown event with this example. PLZ HELP, YANG!!! Pin
yogeshcprajapati@hotmail.com Yogesh15-May-09 0:57
memberyogeshcprajapati@hotmail.com Yogesh15-May-09 0:57 
GeneralRe: KeyDown event with this example. PLZ HELP, YANG!!! Pin
Yang Kok Wah26-May-09 3:49
memberYang Kok Wah26-May-09 3:49 
GeneralRe: KeyDown event with this example. PLZ HELP, YANG!!! Pin
yogeshcprajapati@hotmail.com Yogesh28-May-09 4:57
memberyogeshcprajapati@hotmail.com Yogesh28-May-09 4:57 
GeneralKeyDown event with this example. Pin
yogeshcprajapati@hotmail.com Yogesh14-May-09 6:46
memberyogeshcprajapati@hotmail.com Yogesh14-May-09 6:46 
GeneralMy modification for the border Pin
gaksoftware9-Jun-08 15:22
membergaksoftware9-Jun-08 15:22 
QuestionAdded new shapes can not be accessable Pin
muharrem1-Apr-08 3:00
membermuharrem1-Apr-08 3:00 
AnswerRe: Added new shapes can not be accessable Pin
Yang Kok Wah26-May-09 3:54
memberYang Kok Wah26-May-09 3:54 
QuestionSimply Line shape Pin
carlornd14-Mar-06 21:00
membercarlornd14-Mar-06 21:00 
AnswerRe: Simply Line shape Pin
Yang Kok Wah19-Mar-06 21:41
memberYang Kok Wah19-Mar-06 21:41 
QuestionHow to resize shape control by mouse? Pin
Jian123456710-Jan-06 4:26
memberJian123456710-Jan-06 4:26 
AnswerRe: How to resize shape control by mouse? Pin
Yang Kok Wah10-Jan-06 15:09
memberYang Kok Wah10-Jan-06 15:09 
Generalconnector Pin
Jian12345679-Jan-06 4:06
memberJian12345679-Jan-06 4:06 
GeneralRe: connector Pin
Yang Kok Wah10-Jan-06 15:25
memberYang Kok Wah10-Jan-06 15:25 
Generalshapecontrol.cs Pin
missions4Him22-Nov-05 11:23
membermissions4Him22-Nov-05 11:23 
GeneralRe: shapecontrol.cs Pin
Yang Kok Wah4-Dec-05 15:05
memberYang Kok Wah4-Dec-05 15:05 
GeneralC Sharp Builder compatible version... Pin
lucapan19-Jun-05 13:06
memberlucapan19-Jun-05 13:06 
GeneralRe: C Sharp Builder compatible version... Pin
Yang Kok Wah21-Jun-05 7:24
memberYang Kok Wah21-Jun-05 7:24 
GeneralRe: C Sharp Builder compatible version... Pin
Jaswinder Singh Kohli2-Jul-05 10:24
sussJaswinder Singh Kohli2-Jul-05 10:24 
GeneralRe: C Sharp Builder compatible version... Pin
Anonymous2-Aug-05 21:00
sussAnonymous2-Aug-05 21:00 
GeneralExcellent Pin
Doubin1-Jun-05 20:35
memberDoubin1-Jun-05 20:35 
GeneralGreat Example Pin
rudy.net1-Jun-05 8:49
memberrudy.net1-Jun-05 8:49 
GeneralRe: Great Example Pin
Yang Kok Wah1-Jun-05 14:39
memberYang Kok Wah1-Jun-05 14:39 
GeneralRe: Great Example Pin
Super Lloyd19-Dec-05 14:12
memberSuper Lloyd19-Dec-05 14:12 
GeneralThank You Pin
rudy.net1-Jun-05 8:48
memberrudy.net1-Jun-05 8:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150901.1 | Last Updated 29 Apr 2014
Article Copyright 2005 by Yang Kok Wah
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid