Created by Paweł Kupis (p.kupis-at-mini.pw.edu.pl).

Goals to demonstrate:

• Example of creating a Windows Forms custom control.
• Creating an editor class.
• Creating a designer class.
• Creating a type converter class.
• Adding a custom control to the toolbox.

Steps:

1. Create your own control
   • Create a new project - Visual C# / Windows / Windows Control Library
   • Change the control's base class from UserControl to Control
     • If the control had been viewed with designer before its base class was changed line of source code like this

       this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;

       had been generated for you
     • Since Control has no AutoScaleMode property that line has to be removed
   • Set the class name to 'MyControl' (use the 'Refactoring -> Rename...' option from the context menu)
   • Add members to the control
     

      private Point[] points = new Point[4];
     
      public Point[] Points {
         get {
             return points;
         }
         set {
             points = value;
             Invalidate();
         } 
      }

     and initialization code to the constructor

      points[0].X = 100;
      points[0].Y = 100;
      points[1].X = 100;
      points[1].Y = 200;
      points[2].X = 200;
      points[2].Y = 200;
      points[3].X = 200;
      points[3].Y = 100;

   • override the OnPaint method

      base.OnPaint(e);
      GraphicsPath gp = new GraphicsPath();
      gp.AddClosedCurve(points);
      e.Graphics.DrawPath(Pens.Black, gp);
      gp.Dispose();
      for(int i = 0; i < 4; i++) {
          e.Graphics.FillRectangle(Brushes.Red, Points[i].X - 5, Points[i].Y - 5, 10, 10);
      }

   • Add the code to make the points possible to move by mouse dragging now (add System.Drawing.Drawing2D namespace)

      private int x, y;
      private int movePoint = -1;
     
      protected override void OnMouseDown(MouseEventArgs e) {
         x = e.X;
         y = e.Y;
         if(e.Button == MouseButtons.Left) {
             movePoint = PointByXY(e.X, e.Y);
             this.Capture = false;
         }
         base.OnMouseDown(e);
      }
      
      protected override void OnMouseMove(MouseEventArgs e) {
         if(movePoint >= 0 && e.Button == MouseButtons.Left) {
             Points[movePoint].X = e.X;
             Points[movePoint].Y = e.Y;
             Invalidate();
         }
         base.OnMouseMove(e);
      }
     
      protected override void OnMouseUp(MouseEventArgs e) {
         if(movePoint >= 0 && e.Button == MouseButtons.Left) {
             Points[movePoint].X = e.X;
             Points[movePoint].Y = e.Y;
             movePoint = -1;
             Invalidate();
         }
         base.OnMouseUp(e);
      }
      
      internal int PointByXY(int x, int y) {
         for(int i = 0; i < points.Length; i++) {
             if(x >= Points[i].X - 5 && x <= Points[i].X + 5 &&
                y >= Points[i].Y - 5 && y <= Points[i].Y + 5) {
                
                 return i;
             }
         }
         return -1;
      }

2. Create another Windows Application project to test your control
   • Drag your control to the new form similar to a standard windows forms control
     • Notice that all controls from the current solution are automatically added to the toolbox
     • Each control is added to a tab named 'XXX omponents', where XXX is a name of a project in which the control exists
       
3. Create an editor class
   • Add a new class named 'MyEditor'
   • Use this code for the class (System.ComponentModel, System.Drawing.Design and System.Windows.Forms.Design namespaces have to be added)
     

      public class MyEditor : UITypeEditor {
         private IWindowsFormsEditorService edSvc = null;
         public override object EditValue(ITypeDescriptorContext context, IServiceProvider provider, object value) {
             if(context != null && context.Instance != null && provider != null) {
                 edSvc = (IWindowsFormsEditorService)provider.GetService(typeof(IWindowsFormsEditorService));
                 if(edSvc != null) {
                     MyControl orgControl = (MyControl)context.Instance;
                     MyControl propertiesControl = new MyControl();
     
                     propertiesControl.Width = orgControl.Width;
                     propertiesControl.Height = orgControl.Height;
                     Array.Copy(orgControl.Points, propertiesControl.Points, 4);
     
                     edSvc.DropDownControl(propertiesControl);
                     return propertiesControl.Points;
                 }
             }
             return value;
         }
     
         public override UITypeEditorEditStyle GetEditStyle(ITypeDescriptorContext context) {
             return UITypeEditorEditStyle.DropDown;
         }
      }

   • Add attributes for the Points property in MyControl class (add System.Drawing.Design namespace)

      [Browsable(true)]
      [Category("Image")]
      [Editor(typeof(MyEditor), typeof(UITypeEditor))]

   • Try to use your control
     
4. Create a designer class
   • Add a new class named 'MyDesigner'
   • Change the base class to ControlDesigner (the System.Design assembly has to be referenced, the System.Windows.Forms.Design namespace has to be added)
   • Add a member to the control
     

      private MyControl component;
      private int movePoint = -1;

     and initialization code

      public override void Initialize(IComponent component) {
         this.component = component as MyControl;
         base.Initialize(component);
      }

   • Add the code to make the points possible to move through the designer now (System.ComponentModel, System.Drawing and System.Windows.Forms namespaces have to be added)

      protected override void OnMouseDragBegin(int x, int y) {
         if (MyControl.MouseButtons == MouseButtons.Left) {
             Point p = component.PointToClient(new Point(x, y));
             movePoint = component.PointByXY(p.X, p.Y);
             if(movePoint >= 0) {
                 component.Capture = true;
             }
         }
         if (movePoint < 0) {
             base.OnMouseDragBegin(x, y);
         }
      }
     
      protected override void OnMouseDragMove(int x, int y) {
         if (movePoint >= 0) {
             Point p = component.PointToClient(new Point(x, y));
             component.Points[movePoint].X = p.X;
             component.Points[movePoint].Y = p.Y;
             component.Invalidate();
         }
         else {
             base.OnMouseDragMove(x, y);
         }
      }
     
      protected override void OnMouseDragEnd(bool cancel) {
         if(movePoint >= 0) {
             movePoint = -1;
             component.Capture = false;
             TypeDescriptor.GetProperties(component)["Points"].SetValue(component, component.Points);
         }
         else {
             base.OnMouseDragEnd(cancel);
         }
      }

   • Notice that control's property has to be updated with the PropertyDescriptor.SetValue() method (obtained using the TypeDescriptor.GetProperties() method)
   • Add an attribute for MyControl class

      [Designer(typeof(MyDesigner))]

   • Try to modify your control using the designer
     
   • Another interesting method of the ControlDesigner class is OnPaintAdornments(), explore it at home :)
5. Create a type converter class
   • Add a new class named 'MyTypeConverter'
   • Change the base class to TypeConverter (add System.ComponentModel namespace)
   • Add the overrided methods that allow non-standard conversion to and from string type (add System.Drawing namespace)

      public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType) {
         if(sourceType == typeof(string)) {
             return true;
         }
         else {
             return base.CanConvertFrom(context, sourceType);
         }
      }
     
      public override bool CanConvertTo(ITypeDescriptorContext context, Type destinationType) {
         if(destinationType == typeof(string)) {
             return true;
         }
         else {
             return base.CanConvertTo(context, destinationType);
         }
      }
     
      public override object ConvertFrom(ITypeDescriptorContext context, 
             System.Globalization.CultureInfo culture, object value) {
             
         if(value is string) {
             try {
                 string[] pointsString = ((string)value).Split(',');
                 List<Point> points = new List<Point>();
                 foreach(string s in pointsString) {
                     string tmp = s.TrimStart('(', ' ').TrimEnd(')', ' ');
                     string[] pointCoordinates = tmp.Split(';');
                     points.Add(new Point(int.Parse(pointCoordinates[0]), int.Parse(pointCoordinates[1])));
                 }
                 return points.ToArray();
             }
             catch(Exception ex) {
                 throw new FormatException(ex.Message, ex);
             }
         }
         else {
             return base.ConvertFrom(context, culture, value);
         }
      }
     
      public override object ConvertTo(ITypeDescriptorContext context, 
             System.Globalization.CultureInfo culture, object value, Type destinationType) {
             
         if(destinationType == typeof(string)) {
             try {
                 Point[] points = (Point[])value;
                 StringBuilder sb = new StringBuilder();
                 for(int i = 0; i < points.Length; i++) {
                     sb.AppendFormat("({0}; {1})", points[i].X, points[i].Y);
                     if(i < points.Length - 1) {
                         sb.Append(',');
                     }
                 }
                 return sb.ToString();
             }
             catch(Exception ex) {
                 throw new FormatException(ex.Message, ex);
             }
         }
         else {
             return base.ConvertTo(context, culture, value, destinationType);
         }
      }

   • Add attribute for the Points property in MyControl class

      [TypeConverter(typeof(MyTypeConverter))]

   • Inspect the Points property in 'Properties' tab, try to modify the coordinates of the points with string representation
6. Adding control to toolbox
   • Icon assigning
     • Create an icon bitmap (16 x 16, 16 colors) - example icon
     • Include the icon file into the control's project (for example using 'Add -> Existing Item...' option from project's context menu)
     • Change icon's 'Build Action' to 'Embedded Resource' (in file's properties tab)
       
     • Add an attribute for MyControl class

        [ToolboxBitmap(typeof(MyControl), "tool.bmp")]

   • Adding the control to toolbox
     • Select 'Choose Items...' option from toolbox's contex menu
     • Press 'Browse...' button on the dialog and choose control's library file
     • A new control should be visible on the list
     • Press 'OK' to confirm an operation, control will be visible in the toolbox now
     •