Visual Drawing.Net

• Download source code - 498.2 KB

Introduction

Many years ago, when Microsoft .NET was newly released, I was working in a company as a Software Consultant and I was in charge of helping our customers to jump start .NET development and teach them the new .NET programming languages, C# and Visual Basic .NET in a condensed and structured way. Most of the developers I assisted were Visual Basic 6.0 developers and many of them were not very familiar with Object Oriented Programming and Design. I needed to find the best way to explain OOP. So, the best example to teach OPP was to use a base Shape class having a virtual Draw method and decorate this Shape class with all aspects of OOP. Next to this, I was also teaching them the design time features of Visual Studio .NET. After these workshops were completed and everyone in the world learned .NET, I had lots of shapes beside me; I decided to make something useful with them, which maybe would be useful to others. Thus, I developed a shape-development tool and a development environment that integrates with Visual Studio .NET.

After I started to work as a Software Architect for various companies in Germany in year 2004 and I had more responsibilities during my work life, I totally forgot that I developed this tool. Just recently, when I was looking to my file archives, I saw it again. I refreshed and updated it now that it also works with newer versions of Visual Studio .NET including Visual Studio 2008, 2010 and 2012. I hope you will like it. It is free and you can download the full source code on http://visualdrawingdotnet.codeplex.com and find the documentation under www.erdalhalici.com.

Note: I developed Visual Drawing.Net only for fun, meaning it is not fully documented. But I tried my best. I will continue adding documentation when I find time to do it.

Background

Visual Drawing.Net is a shape-development tool providing a development environment that integrates with Visual Studio .NET 2005/2008/2010/20012 and all related express editions.

Visual Drawing.Net speeds up the development of graphical applications based on the vector graphics. All the shapes that are created using Visual Drawing.Net are programmable and their attributes and properties can be changed at any time during the run time of the containing application. Shapes are designed using object oriented programming paradigm supporting visual inheritance in the Visual Studio .NET 2005/2008/2010/2012 and all Express editions development environment.

Visual Drawing.Net is a shape-based drawing tool, a wealth of built-in shapes that developers can drag onto the drawing surface to create drawings; many third-party tools for use in Visual Studio .NET are available as well. Sometimes, however, when no built-in or third-party shapes exist to solve a specific drawing problem, a shape developer must create custom shapes that have a particular appearance or behave in a certain way at any time. Once created, custom shapes become reusable components that can be used in applications or compiled into shape libraries to be used in the applications. The capacity to use programmable shapes is one of the features that make Visual Drawing.Net such a powerful drawing tool.

Developing a shape involves creating the geometry of the shape and specifying and implementing its behavior. By choosing the correct combination of geometry and behavior, a shape developer can create shapes that model the objects in the real world that they represent. Shape geometry refers to a shape’s appearance, and consists of the lines, angles, and formatting of a shape, and whether a shape is rotated. It also includes the way a shape is structured. Whether, for example, it is a simple shape or a shape container that groups several simple shapes together. You create shape geometry by drawing a shape, using the Visual Drawing.Net on design view. You can also create or extend shape geometry by writing code in the code view.

Why Use Visual Drawing.Net?

Some of the reasons for using Visual Drawing.Net to develop shapes are as follows:

• Visual Drawing.Net is a development and productivity tool for developers who design and develop graphical applications. It provides a custom work environment that integrates with Visual Studio .NET 2003 and Visual Studio .NET 2005 and all Express editions to make it easier to specify, create, build, test, and maintain shapes.
• Shapes are extendable. You can create your own shape by overriding the shape method MakePath and once a Shape is created, it can be used in the Shape Container. The Shape Container will provide design time support for your shape to rotate, shear, move, warp, shade, fill with a color or using a brush, etc.
• Visual Drawing.Net provides consistency in newly developed shapes. You could implement the same behavior in a variety of ways in the Shape Containers (for example, by using visual inheritance in all Visual Studio .NET and Express Editions). With Visual Drawing.Net, behaviors are applied the same way every time.
• Visual Drawing.Net stores shapes in Shape Containers, which is also a Shape object and all attributes and behaviors associated with shapes you create independently using any .NET supported programming language (C#, VB.NET, etc.), making it easier for teams of designers, developers, and testers to work cooperatively, or for different aspects of shape creation to be handled by different teams or companies.

When to Use Visual Drawing.NET?

Use Visual Drawing.Net, when you want to do any of the following:

• Create programmable shapes that have complex attributes and behaviors, such as multi-state shapes.
• Create shapes that are part of a hierarchy of similar shapes or sets of shapes that have minor variations.
• Create libraries of shapes and maintain them over time, including making changes to numerous shapes at the same time.
• Be able to test shapes you have developed to ensure they implement specified behaviors correctly.
• Create shapes as part of a shape-development team that divides labor amongst shape designers, developers, and testers, or outsource parts of the shape development process to other organizations.
• Store shape information independently rather than in the applications in which the shapes are used.

Setup Your Development Environment

Please take the following steps to set up your Visual Studio .NET development environment:

• Create a new C# or VB.NET project.
• Add a reference to Camalon.Drawing.dll, Camalon.ColorPicker.dll, and Camalon.Drawing.Design.dll in your project.
• Add a new ShapeContainer class in your project:

  Note: Instead of adding a Class, you can add a new Component in your project and then inherit it from Camalon.Drawing.ShapeContainer class as shown below. Thus, all Shape Container Designer required code would be generated automatically.

  1. In Solution Explorer, select a target project and add a new class in your project.
  2. Inherit your newly added class from Camalon.Drawing.ShapeContainer class and add designer required method InitializeComponent as described below:

[System.ComponentModel.ToolboxItem(true)]
public class MyShapeContainer:Camalon.Drawing.ShapeContainer
{
     public MyShapeContainer()
      {
        //This call is required by the Shape Container Designer
           InitializeComponent();
      }
 
      //Required method for Designer support - do not modify
    //the contents of this method with the code editor.
     private void InitializeComponent()
     {
     }
}

<System.ComponentModel.ToolboxItem(True)> _
Public Class MyShapeContainer Inherits Camalon.Drawing.ShapeContainer
 
    Public Sub New()
 
        'This call is required by the Shape Container Designer
         InitializeComponent()
 
    End Sub

    'Required method for Designer support - do not modify
     'the contents of this method with the code editor.
     Private Sub InitializeComponent()
 
    End Sub
 
End Class

• Add a custom tab to the Toolbox:
  1. Right-click on any existing tab in the Toolbox and choose Add Tab from its shortcut menu. The new tab appears at the bottom of the Toolbox window, with the Pointer tool automatically added.
  2. In the text box at the bottom of the Toolbox, type a name for the new tab and then press ENTER.

     Note: If you already have a custom tab in your ToolBox that you want to use, ignore this step.

• Add Shapes and shape decorators (ShapeBrush, ShapePen, etc.) on your Toolbox tab:

  1. On the Tools menu, choose Add/Remove Toolbox Items.

     The Customize Toolbox dialog box opens.

  2. In the Customize Toolbox dialog box, click from tab to tab to browse through available categories of Toolbox items.

  3. Click Browse to add the Shapes and painting tools not available on the current list. To do this, locate the Camalon.Drawing.dll.

  4. Click OK to close the Customize Toolbox dialog box. The Shapes and painting tools are added to the tab currently selected in the Toolbox. From there, you can drag and drop Shapes and painting tools in your Shape Container.

Adding Your Own Shapes in a Windows Form

To be able to add your own shapes and shape containers in a form, you need to use ShapeControl. ShapeControl enables you to easily use and modify your predefined shapes and shape containers in a Windows Form object. A shape control can contain only one shape and provides design time support for the attached shape the same way as for a shape on a Shape Container Designer.

Figure 1 above illustrates the collection of shapes in a shape container that makes a diamond. In Figure 2, the diamond is added on a Windows Form together with a ShapeControl object and it has a SandyBrown background color.

The ShapeControl is inherited from the Control class. When a Shape based object is added from the ToolBox to a ContainerControl inherited object during design time, a new ShapeControl for this Shape will also be created and added to the container control to display the shape. You can transform (Rotate, Shear, Scale, Warp), relocate, resize, fill, etc., it on the shape control the same way as you would modify a shape in the shape container during the design time.

You can align the shape in the shape control using the Layout Toolbar in the Visual Studio IDE. All aligning commands of the shape in this case are relative to the shape control. For example; when you click the "Make Same Size" command, the shape will have the same size as the size of the shape control. ShapeControl provides the same design time features for a shape as the Shape Container Designer.

The ScalindResize property allows you to specify the Resize Mode of the ShapeControl. If this property is set to true, the shape in the shape control will be locked and only scaled (globally) when the ShapeControl is resized. This transformation is applied to all painting attributes of the shape, such as ShapePen, ShapeBrush, etc. By default, this property set to false.

Using the Shape property, you can assign a shape to be painted on the ShapeControl object.