Silverlight learning notes-creating a Silverlight Custom Control (1)-design

Silverlight 2 is famous for its rich and powerful and reliable control model, which is the basis for controls and third-party control packages included in the platform. You can also use this control model to build your own control.
When learning how to write custom controls for the new platform, I often copy some built-in controls: buttons and lists. These controls may seem simple on the surface, but they always reveal key features of the Control Model and can test people's knowledge about these features.
Next we will build a custom control mysilverbutton step by step.
1. Open vs2008, file-Create Project-Silverlight class library, and enter mydesignbutton as the project name. By default, the created Silverlight class library has a class1.cs class, which is a common C # class and has no relationship with Silverlight. You can choose to retain it and replace it with your favorite name using the vs refactoring function, you can also delete it and recreate a class. In short, in our Silverlight class library, we only need to keep a class with the name of the control we want to develop. So here, we change the name of class1.cs to mysilverbutton. CS, so that this class inherits from contentcontrol,CodeAs follows:

Using System;
Using System. net;
Using System. windows;
Using System. Windows. controls;
Using System. Windows. documents;
Using System. Windows. Ink;
Using System. Windows. input;
Using System. Windows. Media;
Using System. Windows. Media. animation;
Using System. Windows. shapes;

Namespace Mydesignbutton
{< br> Public class mysilverbutton: contentcontrol
{< br>
}
}

2. Add a new folder named themes for this project, because the next step is to create a folder named GENERIC. the XAML file (default control template) is used to store the appearance definition of the custom control. CreateCubeThe method is as follows: alias, but we need to change its suffix to XAML. Therefore, its full name is generic. XAML. The content of this file is as follows:

 

< Resourcedictionary
Xmlns = " Http://schemas.microsoft.com/winfx/2006/xaml/presentation "
Xmlns: x = " Http://schemas.microsoft.com/winfx/2006/xaml "
Xmlns: custom = " CLR-namespace: mydesignbutton " >

< Style targettype = " Custom: mysilverbutton " >
< Setter Property = " Template " >
< Setter. Value >
< Controltemplate targettype = " Custom: mysilverbutton " >
< Grid X: Name = " Rootelement " >
< Rectangle X: Name = " Bodyelement " Width = " 200 " Height = " 100 " Fill = " Brown " Stroke = " Purple " Radiusx = " 16 " Radiusy = " 16 "   />
< Textblock X: Name = " Buttoncaption " Horizontalalignment = " Center " Verticalalignment = " Center " Fontsize = " 26 " />
</ Grid >
</ Controltemplate >
</ Setter. Value >
</ Setter >
</ Style >
</ Resourcedictionary >

 

3. Add the constructor of the mysilverbutton class and add code to the constructor.

 

This . Defaultstylekey =   Typeof (Mysilverbutton );

 

After this code is added, you can see its appearance When referencing this control. The constructor is as follows:

Public Mysilverbutton ()
{
This . Defaultstylekey =   Typeof (Mysilverbutton );
}

 

4. Let's take a look at the initial results. For this reason, we need to create another project, file-Create Project-Silverlight ApplicationProgram. Project name: myslbutton, project type: Asp.net web application project. In this case, vs2008 automatically builds the necessary project environment for us. There are two projects, one is myslbutton. The other is myslbutton. Web, and the latter is the running environment of the former. To see the initial results, we need to do the following.
(1) first introduce the mydesignbutton. dll generated in the project named mydesignbutton created earlier in the myslbutton project (in the bin/DEBUG directory of this project ). That is, the custom control we created.
(2) modify the page. XAML file of the myslbutton project. Add two codes.

First, introduce the xmlns definition. The code is:

Xmlns: custom = " CLR-namespace: mydesignbutton; Assembly = mydesignbutton "

The second is to reference our custom controls. The code is:

< Custom: mysilverbutton X: Name = " Myfirstslbutton " >   </ Custom: mysilverbutton >

After modification, the complete page. XAML file is:

  < Usercontrol X: Class = " Myslbutton. Page "
Xmlns = " Http://schemas.microsoft.com/winfx/2006/xaml/presentation "  
Xmlns: x = " Http://schemas.microsoft.com/winfx/2006/xaml "  
Xmlns: custom = " CLR-namespace: mydesignbutton; Assembly = mydesignbutton "
Width = " 400 " Height = " 300 " >
< Grid X: Name = " Layoutroot " Background = " White " >
< Custom: mysilverbutton X: Name = " Myfirstslbutton " >

</ Custom: mysilverbutton >
</ Grid >
</ Usercontrol >

(3) generate a project and press F5 to run it. We can see the initial results.
Next article:
Silverlight learning notes -- create a Silverlight custom control (2) -- Event Response

Go to: Silverlight Study Notes List