Getting started with developing Silverlight applications using the. NET language (4): Custom Controls

The next few articles will involve writing more C # code. First, let's start with the most commonly used custom control.

We all know that custom controls have many advantages. It not only makes up for the shortcomings of the control elements provided by Silverlight, but also allows us to customize complex elements as needed, it can also improve the reusability of a group of elements with similar clear purposes. For example, we can use buttons as our custom controls. Although Silverlight 2.0 (the original Silverlight 1.1) will provide direct support for buttons and other controls, but because it is very typical, let's take a button as an example, step by step, to create a custom control and add the control to the Silverlight application.

1. Create a custom control project

The custom control project and the general Silverlight project are different. Select Silverlight class library when creating a project.

After the project is created, you can see a code file containing an empty class (such as the. CS file) and some assembly references. In the following example, this code file is not used, so you can delete unnecessary files.

2. design the control UI

The UI for custom controls is designed using the same XAML. Therefore, we add a XAML file to the new project to present the interface. Note that in the Add new item dialog box, select Silverlight user control.

In this new XAML file, we can see that the canvas label on the root node has fewer attributes than the basic XAML page in the Silverlight project, and the reference to the Assembly is mainly less.

3. Add public attributes

With XAML, We can reference the compiled project assembly file to use this custom control. However, this custom control is still a static interface. As a control, we always hope to customize some of its basic attributes. Therefore, we need to add public attributes to this custom control. Here we need to make some modifications to the separated code files of XAML.

Open the code separation file and we can see code similar to the following:

Public class mycontrol: Control
...{
Public mycontrol ()
...{
System. Io. Stream S = This. GetType (). Assembly. getmanifestresourcestream ("mysilverlightcontrol. mycontrol. XAML ");
This. initializefromxaml (new system. Io. streamreader (s). readtoend ());
}
}

It is worth mentioning that all custom controls inherit from a class called control, rather than a canvas class, therefore, in code, we cannot directly use the element name in XAML to define the attribute of an element as in the separation code in the Silverlight project. Instead, we need to traverse the XAML tree to find an element.

In the above Code, the initializefromxaml method returns a frameworkelement object, which gives us a root node of the XAML tree. We need to find the elements we want through this root node. Therefore, we first need to declare a member variable in this class, and then assign the value of initializefromxaml to it:

Frameworkelement implementationroot;

//......

Implementationroot = This. initializefromxaml (new system. Io. streamreader (s). readtoend ());

Then, you can traverse the XAML tree contained in implementationroot to find the required elements. First, declare the required member variables. For example, you need to find a textblock in XAML:

Textblock TB;

//......

TB = implementationroot. findname ("mytextblock") as textblock;

Here, mytextblock is the name given to a textblock element through X: Name in XAML.

Next we can use TB to add public attributes to this textblock. For example, set an attribute that can change the text content of the textblock:

Public String text
...{
Get
...{
Return TB. text;
}
Set
...{
TB. Text = value;
}
}

4. Test controls

After completing the preceding steps, a basic custom control is completed. Since a custom control project is an assembly file, we cannot directly view the results of our control application through the project itself. We can create a new Silverlight Project in the solution to test the custom control.

The test method is simple. First, reference the Assembly file generated by the custom control project to the newly created Silverlight project by adding reference --> Project tag. Then, declare a new namespace in the canvas root node of the XAML file and specify the Assembly File Name:

<Canvas
....
Xmlns: mynamespace = "CLR-namespace: mysilverlightcontrol; Assembly = clientbin/mysilverlightcontrol. dll"
....
>

....

</Canvas>

In this way, we are done. We can use custom controls like other elements. You only need to specify the namespace of the control during use.

<Mynamespace: mycontrol X: Name = "testcontrol" text = "hi"/>