Full Silverlight-Hello word Application

ArticleDirectory

• Want
• Start using vs2008 to create helloworld
• Program file structure
• Program running principle
• Complete helloworld Application
• Relationship between mainpage. XAML and mailpage. XAML. CS

If you have already configured your development environment, if not, you can refer to the full line of Silverlight-start.

Want

1. Here I will use two development environments for the same example: vs2008 and microfot expression blend 3.

2. Explain the file structure and composition of a typical Silverlight project.

3. Briefly explain how a Silverlight project runs.

4. Complete the hellowworld application.

5. Relationship between mainpage. XAML and mailpage. XAML. CS.

Microsft expression blend 3: it is a gorgeous visual development environment, mainly used for interface layout and work-related work. Of course, its function is far more than that.

Start using vs2008 to create helloworld

1. Enable vs2008 to create a project: File> new project.

2. In the "new project" dialog box, select C #> Silverlight application. Name the project helloworld.

3. Click OK. The following dialog box is displayed:

Because Silverlight needs to run in a plug-in Environment in essence, it needs a host to host it. This interface is used to check whether you need to create a web application to carry the Silverlight application at the same time. Of course, if you only develop the Silverlight application independently, you do not need to remove the check before host the Silverlight application in a new web site. If so, your Silverlight application will generate an HTML page for testing when you need to debug it to host your Silverlight.

Program File structure

If you click "OK" (OK), the following information is displayed:

 

Once completed, you can define the file structure created for you in solution. It is necessary to give a brief introduction to the components of the Silverlight development environment.

First, you will see a helloworld project. This is a "Silverlight application" type project.Silverlight cannot use the class libraries of the traditional. NET Framework platform. It has its own development platform.

In the Silverlight application project, you can see the and B identified by me. Here:

 A: Required. When Silverlight is started, it will be executed first. It is a specific app object inherited from the application class. It mainly helps you complete application initialization and start the application, that is, we know the "program Portal ".

 B: By default, you will see a mainpage. XAML and mainpage. XAML. CS file that inherits the usercontrol class. By default, the app loads this interface.

Another project is located under the Silverlight application project. It is a traditional web application project. Under this project, I marked C.

C: It is automatically generated and used to host the Silverlight application. You can set any one of them as the starting page.

Clientbin: You can also see a clientbin folder. The download package (. xap) generated by Silverlight is saved here. Once you generate the project, you will see the helloworld. xap package in it.

The file structure is explained here.

Program running principle

1. Once you have completed the Silverlight program, it will generate a. xap package and put the package into the clientbin file. However, you may not only view the. xapprogram package, but also see some. Zip compressed files. These packages and packages will be downloaded to the client.

2. When a user requests a page that carries Silverlight, such as the helloworldtest. ASPX page, the package will be downloaded first.

3. Once the package is downloaded, The Silverlight application will be loaded to the application domain during the Silverlight operation.

4. Then, app. CS will be executed first, and it will load mainpage. XAML and display it.

Application domain: Maybe many people are not very familiar with this concept. You can think of it as a specific area dedicated to running the program for the moment. Just like people can only live on the earth, but if you want to go to the moon, please wear a space suit. The application domain here is a bit similar to the space server.

Complete helloworld Application

1. Open the mainpage. XAML file:

 Mainpage. XAML  <  Usercontrol   X : Class = "Helloworld. mainpage"      Xmlns = Http://schemas.microsoft.com/winfx/2006/xaml/presentation"       Xmlns : X = Http://schemas.microsoft.com/winfx/2006/xaml"      Xmlns :D = Http://schemas.microsoft.com/expression/blend/2008"   Xmlns : MC = Http://schemas.openxmlformats.org/markup-compatibility/2006"       MC : Ignorable = "D"   D : Designwidth = "640"   D : Designheight ="480"  >      <  Grid   X : Name = "Layoutroot"  >          <  Grid. rowdefinitions  >              <  Rowdefinition   Height = "Auto"  />             <  Rowdefinition   Height = "Auto"  />          </  Grid. rowdefinitions  >          <  Textblock   X : Name = "Txtcontent"   Text = ""   Width ="150"   Height = "48"   Fontsize = "48"   Grid . Row = "0"  />          <  Button   X : Name = "Btnshow"   Content ="Show Hello World"   Click = "Btnshow_click"   Grid . Row = "1"  />      </  Grid  >  </  Usercontrol  > 

 

Add:

<Grid. rowdefinitions><Rowdefinition Height="Auto"/><Rowdefinition Height="Auto"/></Grid. rowdefinitions>
 

We can ignore the usage of grid. Grid is similar to the <Table> label we use. AboveCodeWe split the grid into two rows. Then we add:

 <  Textblock  X : Name = "Txtcontent"   Text = ""   Width = "150"   Height = "48"   Fontsize = "48"   Grid . Row = "0"  /> <  Button   X : Name = "Btnshow"Content="Show Hello World"   Click = "Btnshow_click"   Grid . Row = "1"  /> 

Textblock is equivalent to the label. Button we use in Asp.net. The grid. Row setting indicates the row in which the corresponding control will be placed. In the button, we set content: it is equivalent to the text of the original button. click: it mounts the event handler btnshow_click, which will be visible in another file (mainpage. XAML. CS) The following is mainpage. XAML. CS

Mainpage. XAML. CSUsing system; using system. collections. generic; using system. LINQ; using system. net; using system. windows; using system. windows. controls; using system. windows. documents; using system. windows. input; using system. windows. media; using system. windows. media. animation; using system. windows. shapes; namespace helloworld {public partial class mainpage: usercontrol {public mainpage () {initializecomponent ();} privat E void btnshow_click (Object sender, routedeventargs e) {this.txt content. Text = "Hello world! ";}}}
 

 

 

 

We can type our code in the event. I want to display a piece of content in txtcontent.

This program has been completed.

 

Relationship between mainpage. XAML and mailpage. XAML. CS

Finally, I need to explain the relationship between the two files. Their relationship is similar to the post-code mode of Asp.net.

In XAML, you can seeX:Class="Helloworld. mainpage", which indicates the managed type it will generate. That is, it will automatically generateHellworld. mainpage class. 

The type defined in mainpage. XAML. CS is public partial class mainpage. Exactly the type of The XAML Association.

However, please note that it does not mean that the XAML will be associated with the type defined in mainpage. XAML. CS.

The fact is: XAML dynamically generates a mainpage type, while mainpage. XAML. CS also generates a mainpage class. However, because they are declared as question categories, all of them are combined into a type.

Now I will show you the dynamically generated types. Please note that

 
 PublicMainpage () {initializecomponent ();}
 

You can see a method in the constructor, but this method is not defined in the mainpage. XAML. CS file. We just need to place the mouse over the method, right-click the mouse, and click "go to definition" in the menu (go to definition ). You can see a file named "mainpage. G. cs" appears in your vs2008, which is the automatically generated mainpage type. When you perform any operations on XAML, this file will help you dynamically generate the corresponding code.

I want to use a simple example to understand some basic content. I hope all of them will be involved. I will not upload the example. This example is simple enough. At the same time, I hope you can read this article to understand some basic logics and concepts of Silverlight running.