 |
Example
Sdg Widget |
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
If you give up you can download my example
here.
This web site was created by Edward Tse, the last
update was
March 11, 2003 11:50 PM
Please send comments or suggestions to webdude@edwardtse.com |