Simple SDG Widget Example

<< Back to the SDG Toolkit page

Below is the full code required to make a minimal Sdg Widget and test it out.

In this tutorial you will learn how to

  • Create you own Sdg Control Library
  • Add properties to your User Control
  • Handle Sdg Mouse Events for your Control
  • Create a clickable surface that changes color when you different people click on it.

Introduction

There are two interfaces which provide all of the required functionality for any sdg Widget. They are ISdgMouseWidget and ISdgKeyboardWidget. It is important to note that ISdgKeyboardWidget inherits from ISdgMouseWidget. So, if you wanted to create your own Sdg Widget from scratch you would have to implement each method of the interface.

To avoid this extra work you may want to use some of our pre built Sdg Controls and User Controls. A Control is the base class from which all other widgets inherit from. A user control is useful for using the visual designer to develop your own Sdg widget. We will use a user control for this example. This tutorial assumes you are already familiar with the basic drawing example.

Tutorial

1) Save the SDG Toolkit files somewhere to disk

2) Open Visual Studio .NET and create a new C# Control Library

3) In the Solution Explorer on the left of the screen right click in the references folder and choose Add Reference

4) Click on the "Browse" button and find the location where you saved the SDG Toolkit. Click "Open" then click "Ok" to add the Sdg Toolkit Reference

5)

  • Ok now lets add a label to the user control in the designer.
  • Click on the toolbox, select the label tool and click and drag a label on the form.
  • Change it's TextAlign property to MiddleCenter.
  • Your user control should look something like below.
  • Change the default label text property to "UserControl1"

6) Now change the "Back Color" property of the label to Web -> Transparent.

7) Double click on the User Control to view the code. In the code section replace the line

public class UserControl1 : System.Windows.Forms.UserControl

With

public class UserControl1 : Sdgt.SdgUserControl

Now you have inherited all of the SdgUserControl functionality to your new control!

8)

  • Close the user control designer, compile your code and reopen the user control designer.
  • This will add all of the Sdgt.SdgUserControl functionality to the designer.
  • Click on the User Control and go to the properties -> Events section.
  • You should see the new events diagramed below.
  • Double Click on the SdgMouseDown selection to add an SdgMouseDown event handler.

9) Add the following code to your program

if (e.ID > 0)
    this.BackColor = Color.Blue;
else
    this.BackColor = Color.Red;

10)

  • Now add a new property that will change the text caption.
  • After the mouse event handler add the following code
  • Now someone can type UserControl1.Text = "Cookie Monstar"; to change the Control Caption
public String Text
{
    get
    {
        return label1.Text;
    }
    set
    {
        label1.Text = value;
    }
}

11)

  • Compile your code (Build -> Build Solution)
  • Create a new C# Windows Application (File -> New -> Project)
  • Right click on the tool bar and click on "Customize Toolbox".
  • Click on the .NET Framework Tab and Click Browse.
  • Look for the mySdgUserControl\bin\Debug directory.
  • There should be two files called UserControl1.dll and the Sdgt dll file
  • Select one and repeat the process for the other dll file.
  • Your toolbox should have several new controls on it like the diagram below

12) To add you cool new UserControl click on it and then click on the form. It should automatically start at the default size.

13) Add an SdgManager and set it's RelativeTo property to "Form1" and run your application. It should look like below when it is clicked on by Mouse 0