Custom Control Tutorial

Size: px

Start display at page:

Download "Custom Control Tutorial"

Cory Sims
6 years ago
Views:

1 Custom Control Tutorial Program: Woei-Kae Chen Text/Picture: Spirit Du 24 December, 2013, Ver Contents About this Document... 1 Tutorial Creating Custom Control... 2 About this Document In the homework, moving graphic objects is required like other drawing tools. There are many ways to achieve the goal. Two common ways are: (1) handling all the mouse events from the form and then calculating everything, e.g. mouse locations, object locations, or others, by yourself, and (2) using custom control to be as graphic object. In this tutorial, the goal is to build an EllipseControl, a custom control, which is by itself selectable and movable. Creating custom control is not difficult. Figure 1 shows the classes to be implemented in this tutorial. You may try to implement LineControl, and RectangleControl by yourself. TutorialForm to display graphic objects EllipseControl new ellipse graphic object using custom control method MovableControl abstracted from all movable graphic objects Figure 1 Class Diagram in this tutorial Windows Programming Tutorial Custom Control, fly me to the moon - 1-

Tutorial Creating Custom Control Step1. Create a new empty project, named as CustomControl. In the empty project, add the following references: System, System.Data, System.Drawing, and System.Windows.

2 Tutorial Creating Custom Control Step1. Create a new empty project, named as CustomControl. In the empty project, add the following references: System, System.Data, System.Drawing, and System.Windows.Forms. Figure 2 Four references Step2. Create a new class: EllipseControl In the solution explorer, click the right mouse key on project, and then create a new class, named as EllipseControl.cs. In the created class, fill the following codes: using System; using System.Collections.Generic; using System.Windows.Forms; using System.Drawing; using System.Drawing.Drawing2D; namespace CustomControl { class EllipseControl : Control { public EllipseControl() { SetStyle(ControlStyles.DoubleBuffer, true); SetStyle(ControlStyles.UserPaint, true); SetStyle(ControlStyles.AllPaintingInWmPaint, true); protected override void OnPaint(PaintEventArgs e) { base.onpaint(e); e.graphics.fillellipse(new SolidBrush(BackColor), 0, 0, Width - 1, Height - 1); e.graphics.drawellipse(new Pen(ForeColor, 2), 0, 0, Width - 1, Height - 1); Windows Programming Tutorial Custom Control, fly me to the moon - 2-

3 Step3. Create a TutorialForm Because that the tutorial is created from an empty project, it is need to create a form to display the custom controls. Add a class: TutorialFrom.cs into the project. using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; namespace CustomControl { class TutorialForm : Form { public TutorialForm() { Text = "Custom control tutorial"; BackColor = Color.White; Size = new Size(640, 480); SetStyle(ControlStyles.DoubleBuffer, true); SetStyle(ControlStyles.UserPaint, true); SetStyle(ControlStyles.AllPaintingInWmPaint, true); for (int i = 0; i < 5; i++) { EllipseControl sc = new EllipseControl(); sc.location = new Point(i * , 10); sc.size = new Size(110, 110); sc.backcolor = Color.Yellow; sc.forecolor = Color.Blue; sc.parent = this; Step4. Create a startup entry. There is no startup entry, main() function, when the empty project is initialized so that create a class: Program.cs and then filled the following codes and execute the project. Windows Programming Tutorial Custom Control, fly me to the moon - 3-

Figure 3 All classes created until now using System; using System.Windows.Forms; namespace CustomControl { class Program { static void Main(string[] args) { Application.

But the user doesn t know they are controls. In order to indicate the user, add a member function into EllipseControl. protected override void OnMouseEnter(EventArgs e) { base.

4 Figure 3 All classes created until now using System; using System.Windows.Forms; namespace CustomControl { class Program { static void Main(string[] args) { Application.Run(new TutorialForm()); Figure 4 Five ellipse controls Step5. Change the cursor when mouse entered Now, there are five ellipse controls in the form (Figure 4). But the user doesn t know they are controls. In order to indicate the user, add a member function into EllipseControl. protected override void OnMouseEnter(EventArgs e) { base.onenter(e); Cursor = Cursors.SizeAll; Step6. Beautify the strange control Well, the ellipse control is real strange because of the yellow rectangle background and the cursor still changed although the mouse doesn t enter the actually ellipse region. Add two member functions in EllipseControl to solve the strange problem. Windows Programming Tutorial Custom Control, fly me to the moon - 4-

5 Figure 5 Not strange anymore private void SetRegion() { GraphicsPath path = new GraphicsPath(); path.fillmode = FillMode.Winding; path.addellipse(-1, -1, Width + 1, Height + 1); Region = new Region(path); protected override void OnResize(EventArgs e) { base.onresize(e); SetRegion(); Step7. States of EllipseControl Three properties are added into EllipseControl class to indicate three different states of control: selected, pressed, and moved. protected bool isselected = false; protected bool ispressed = false; protected bool ismoved = false; Step8. Interact with mouse events Add a new member function: onmousedown and modify two existing member functions: OnPaint, SetRegion to let the ellipse object can interact with other mouse events (Figure 6). protected override void OnMouseDown(MouseEventArgs e) { base.onmousedown(e); ispressed = true; SetRegion(); protected override void OnPaint(PaintEventArgs e) { base.onpaint(e); e.graphics.fillellipse(new SolidBrush(BackColor), 0, 0, Width - 1, Height - 1); Windows Programming Tutorial Custom Control, fly me to the moon - 5-

e.graphics.drawellipse(new Pen(ForeColor, 2), 0, 0, Width - 1, Height - 1); if (isselected ispressed) { Pen p = new Pen(Color.Green, 2); p.dashstyle = DashStyle.Dash; e.graphics.drawrectangle(p, 1, 1, Width - 2, Height - 2); private void SetRegion() { GraphicsPath path = new GraphicsPath(); path.

6 e.graphics.drawellipse(new Pen(ForeColor, 2), 0, 0, Width - 1, Height - 1); if (isselected ispressed) { Pen p = new Pen(Color.Green, 2); p.dashstyle = DashStyle.Dash; e.graphics.drawrectangle(p, 1, 1, Width - 2, Height - 2); private void SetRegion() { GraphicsPath path = new GraphicsPath(); path.fillmode = FillMode.Winding; if (isselected ispressed) { path.addrectangle(new Rectangle(0, 0, Width, 2)); path.addrectangle(new Rectangle(0, 0, 2, Height)); path.addrectangle(new Rectangle(0, Height - 2, Width, 2)); path.addrectangle(new Rectangle(Width - 2, 0, 2, Height)); path.addellipse(-1, -1, Width + 1, Height + 1); Region = new Region(path); Figure 6 A selected ellipse object Step9. No~ it can t lose focus... Good, the user can select an ellipse object but the selected object can t lose focus anymore. In order to solve the problem, add two member functions into EllipseControl: protected override void OnMouseUp(MouseEventArgs e) { base.onmouseup(e); ispressed = false; isselected = (ismoved)? true :!isselected; ismoved = false; SetRegion(); Windows Programming Tutorial Custom Control, fly me to the moon - 6-

7 protected override void OnMove(EventArgs e) { base.onmove(e); ismoved = true; Step10. Fly me to the moon... Okay, it looks good but not perfect enough. It is still unable to move ellipse controls! As shown in Figure 1, there still one class doesn t be added into the project. Add a new class: MoveableControl into the project and fill the following codes: using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Windows.Forms; namespace CustomControl { class MoveableControl : Control { enum MoveState { Normal, MouseDown, Dragging ; Point MouseDownPoint; Rectangle dragbox = Rectangle.Empty; MoveState state = MoveState.Normal; protected override void OnMouseDown(MouseEventArgs e) { state = MoveState.MouseDown; MouseDownPoint = e.location; Size dragsize = SystemInformation.DragSize; dragbox = new Rectangle(new Point(e.X - (dragsize.width / 2), e.y - (dragsize.height / 2)), dragsize); protected override void OnMouseMove(MouseEventArgs e) { if (state == MoveState.MouseDown &&!dragbox.contains(e.x, e.y)) state = MoveState.Dragging; if (state == MoveState.Dragging) MoveControl(e); protected override void OnMouseUp(MouseEventArgs e) { if (state == MoveState.Dragging) MoveControl(e); state = MoveState.Normal; Windows Programming Tutorial Custom Control, fly me to the moon - 7-

8 private void MoveControl(MouseEventArgs e) { Location = new Point(Location.X MouseDownPoint.X + e.x, Location.Y - MouseDownPoint.Y + e.y); Step11. Sorry, this is the real last step! Why can t the ellipse controls be moved right now? Because that the MoveableControl is just an independent class and the EllipseControl should change its parent like the following code. Okay, the ellipse object is really able to be moved now... Fly me to the moon, EllipseControl said... class EllipseControl : MoveableControl {... End Tutorial Windows Programming Tutorial Custom Control, fly me to the moon - 8-

CALCULATOR APPLICATION

CALCULATOR APPLICATION Form1.cs using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;