Silverlight 2 tutorial (II): Develop a simple Silverlight 2 Application

After the preparation is complete, you can start the development of the Silverlight 2 application.

Start VS2008 and create a project. You can see "Silverlight" under "project type" and select "Silverlight ", in the template on the right, you can see that "installed templates" list "Silverlight Application" and "Silverlight Class Library" templates.

 

Select the "Silverlight Application" template. The following dialog box is displayed:

 

Because the Silverlight Application cannot be run independently yet, it must be embedded in the page and started through the object Tag Element. Therefore, when creating a "Silverlight Application, VS will prompt you to choose a method to run the Sliverlight program. If you select "Add a new Web to the solution for hosting the control", you need to create a Web site: You can create a Web site or a Web Application project.

 

If you select "Generate an HTML test page to host Silverlight within this projectfolder", a testpage.html file is created under clientbinin the project folder to run the Silverlight program.
Next, we will use the "Web Application Project" method as a simple example.

 

 

You can use the up and down arrows to switch between the design area and the code area, or you can use the buttons in the blue box on the right to hide the area and horizontal and vertical split windows.
Enter the following code between the <Grid> </Grid> mark in the xaml code area:

<Canvas. Top = "20">
<TextBlock Canvas. Top = "10" Canvas. Left = "20"> enter your name: </TextBlock>
<TextBox x: Name = "UserInput" Width = "200" Height = "30" Canvas. Top = "40" Canvas. Left = "20"> </TextBox>
<TextBlock x: Name = "Msg" Canvas. Top = "90" Canvas. Left = "20" Foreground = "Navy" FontSize = "48"> </TextBlock>
<Button Click = "Button_Click" Content = "Click me" FontSize = "24" Width = "160" Height = "60" x: Name = "BtnTest" Canvas. top = "160" Canvas. left = "20"> </Button>
</Canvas>

In the input process, Visual Studio displays a smart prompt to facilitate the input.
In the XAML code area, right-click the code area and select "view code" from the right-click menu to switch to the code area to process tasks executed by users by clicking the button. You can also select "navigate to event handler" on the event name to enter the code input interface.

 

 

All members of current XAML can be found from the drop-down list on the right.
In the event processing function of Button_Click, enter the following content:

String UserInputContent = this. UserInput. Text;
If (UserInputContent. Equals (String. Empty ))
{
This. Msg. Text = "Hello Silverlight World! ";
}
Else
{
This. Msg. Text = "hello," + UserInputContent;
}

The entire Hello World development process is now complete. Click F5 Jian and enter your name in the text input box.

 

Notes:
1. the control in the toolbox can only be dragged to the XAML code area, but cannot be dragged to the design area. This interface layout makes a lot of inconvenience [effective in the WPF Application ];
2. The preview and attribute boxes of the document outline are unavailable. It is estimated that the Beta version is not complete yet.

3. Element positioning should be placed in the Canvas. For details, see:
Http://dotnet.aspx.cc/SilverlightSDK/Silverlight/conceptual/c_Silverlight_positioning.htm