Home » Articles » Creating Shaped Forms and Controls in Visual Basic - Article View

Creating Shaped Forms and Controls in Visual Basic - Article Description

Author Name: Adhokshaj Mishra

About The Author
I am a student of B.Tech(CSE) at UIET, CSJM University, GT Road, Kanpur, UP, India.

Creating Shaped Forms and Controls in Visual Basic
Used Technologies 1. Microsoft .NET Framework 2.0 or higher 2. Visual Basic .NET 3. Visual Studio 2005 or higher Introduction In previous versions of Microsoft® Visual Basic®, creating non-rectangular forms and controls was a time-consuming and labor-intensive process that involved API calls and extensive difficult programming efforts. Not anymore - one of the niftiest aspects of Windows Forms is that you can craft them into non-rectangular shapes. Additionally, you can draw controls on a form in a variety of shapes. An application featuring non-rectangular forms and controls has a distinctive, eye-catching look for end users. Both Windows Forms and controls can be drawn in unconventional shapes. This article demonstrates how to create an irregularly shaped form and then create controls that are non-traditionally shaped to put on that form. Note Be aware that this process involves a great deal of graphics programming; as a result, computers will perform differently based on memory and graphics cards present. Always test any applications that involve custom drawing on a variety of video cards to ensure satisfactory performance before deploying to users. Methodology Basically, there are two ways to create non rectangular windows forms: 1. By Using Background Image: In this method, a background image is applied to the form, and TransparencyKey property is set to the background color of the applied image. This process is easier, but requires color depth of less than 24 bit, and thus resulting poor display. If color depth is higher than 24 Bit, this method fails: form is displayed rectangular without any “cut out”. 2. Programmatically Shaping: In this method, the developer has to programmatically define the areas which are to be shown. Although this method is more difficult as it requires “graphical programming”, it is independent from color depth, and thus provides better performance. Also, the border of the form should be removed otherwise the form would look weird if it had a fancy shape with the same old rectangular title bar above it. However, when you remove the title bar, you lose all the functionality that is associated with it, including moving the form and closing it. So, you will write code to replace these lost features, so that users can continue to interact with you forms in the way that they expect. By Using Background Image Create a bitmap with irregular shape 1. Open any graphics program and draw a non-rectangular shape with different background color. (I have used MS Paint in this example. Any simple program is enough.) 2. Save the file in BMP format (e.g. image.bmp). Create Visual Studio Project 1. Launch Microsoft Visual Studio®, and create a windows application project. Set background to reshape the form 1. Click the form in Windows Form Designer in order to get it focused. 2. Set the properties as given below: Property Value Description FormBorderStyle None Remove old style border BackgroundImage Image.bmp Set background Image TransparencyKey Background color of image.bmp To make background transparent 3. Save the project. Set the color depth of your display below than 24 Bit. Build and run the application. You will notice that the form has been shaped in the shape of your bitmap. Also, the title bar is invisible, and thus, you will be unable to move it. To add the lost functionalities, exit the application by pressing Ctrl + Break in Visual Studio, or Alt + F4 in your application, and continue development. Write code to close the application and to move the form 1. Add a button control with name Button1 and labeled as Close Form. 2. Add ‘Click’ event handler, and add following code: Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click Me.Close() End Sub 3. Create a procedure to move the form whenever it is dragged. Declare a variable to get the point where user has clicked the form: Dim mouse_offset As Point 4. Create event handler for MouseDown event. Add the following code: Private Sub Form1_MouseDown(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseDown mouse_offset = New Point(- e.X, - e.Y) End Sub This code gets the point of clicking and stores it in mouse_offset variable. 5. Create an event handler for MouseMove event. Add the following code: Private Sub Form1_MouseMove(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseMove If e.Button = MouseButtons.Left Then Dim mousePos As Point = Control.MousePosition mousePos.Offset(mouse_offset.X, mouse_offset.Y) Location = mousePos End If End Sub This code moves the form to the new location. 6. Save the project, rebuild the application and run it. Drag the form to see the newly added functionality in action. Custom shaped controls In order to create non-rectangular controls, we will take advantage of GraphicsPath class, which represents a series of connected lines and curves that we can use to draw shapes. First, we specify an instance of the GraphicsPath class and tell it what shapes we want it to draw. Next, we set the control's Region property to that instance of the GraphicsPath class. This is all that is required to create controls that have a unique interface. To create a button shaped as text 1. Draw a button control on the form. 2. Set the properties as given below: Name: CustomButton BackColor: Contrasting color from the background. Text: 3. Create an event handler for Paint event. Add the following code which will craft the button in shape of ClickMe! : Private Sub CustomButton_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles CustomButton.Paint Dim myGraphicsPath As New System.Drawing.Drawing2D.GraphicsPath() Dim stringText As String = "Click Me!" Dim family As FontFamily = New FontFamily("Arial") Dim fontStyle As FontStyle = fontStyle.Bold Dim emSize As Integer = 35 Dim origin As PointF = New PointF(0, 0) Dim format As StringFormat = StringFormat.GenericDefault myGraphicsPath.AddString(stringText, family, fontStyle, emSize, origin, format) CustomButton.Region = New Region(myGraphicsPath) End Sub The code above has the button paint itself as a string of text in the Arial font. Also, the code specifies the other attributes of the string (size, style etc.). Then the string is added to an instance of the GraphicsPath class. Finally, the GraphicsPath is set to the button's Region property. Caution!! The GraphicsPath class draws relative to the control, not the form. Drawing a shape at location (0,0) places the shape at the upper-left corner of the control. 4. Write code to change the background color(or any other code you like) to button’s Click event. 5. Save the project, rebuild and execute it. See your project under execution. Quiet impressing!!! Note: If you are unable to see the button, exit the application. Enlarge the form and run again. Creating controls in geometric shapes You can use shapes that have been predefined within the .NET Framework. Using these shapes in combination allows you a great degree of control over the look of your controls. Note: The GraphicsPath class has methods that define shapes you can use, such as curves, arcs, pies, and rectangles. In the example below, the code defines four ellipses. When these are applied to a control, such as a button, they look like eyes. Feel free to experiment with combinations of the other shapes defined in the GraphicsPath class. Private Sub Button1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Button1.Paint Dim myGraphicsPath As System.Drawing.Drawing2D.GraphicsPath = New System.Drawing.Drawing2D.GraphicsPath() myGraphicsPath.AddEllipse(New Rectangle(0, 0, 125, 125)) myGraphicsPath.AddEllipse(New Rectangle(75, 75, 20, 20)) myGraphicsPath.AddEllipse(New Rectangle(120, 0, 125, 125)) myGraphicsPath.AddEllipse(New Rectangle(145, 75, 20, 20)) Button1.BackColor = Color.Chartreuse Button1.Size = New System.Drawing.Size(256, 256) Button1.Region = New Region(myGraphicsPath) End Sub Form class derives from the System.Windows.Forms.Control class. In other words, the instance of the form provided to you by the Windows Forms Designer is ultimately a control. Thus, while you used the "bitmap image" method above to quickly create a custom-shaped form, you could also use an instance of the GraphicsPath class to create a custom-shaped form. Try experimenting with instances of the GraphicsPath class to make your form into crazy shapes.

This Page has been currently rated as:
Rate this Page :    [ 0  votes]

College Events

Get the latest events
all over india

Internships & Jobs

The easiest way to connect
campus and industries

Study Abroad

The easiest and fastest
way to go abroad

Current Affairs

Get all latest News from
india and the world
Not a Member yet? Join Now | Login