I want to "Shine"-Silverlight technology tutorial (published on IT168 technology channel)

When talking about RIA development, everyone will think of Flash. But now we have another option, Microsoft's new "Silverlight" (Chinese unofficial abbreviation "Shining ").

1. What is Silverlight?

Silverlight is a cross-browser, cross-platform plug-in that provides the next-generation. NET-based media experience and rich interactive applications for the network.
It has the following features:
Cross-browser, cross-platform, can run in all popular browsers, can run in Microsoft Windows and Apple Mac OS X.
Seamless integration with existing JavaScript and ASP. net ajax code reduces costs.
Supports multiple development languages, such as JavaScript, C #, VB, Ruby, and Python.
Silverlight uses XAML for user interface design. XAML is an XML text file format that is not compiled as a binary file. The content can be well indexed by search engines.

2. Create the first Silverlight Program

Next, we will introduce how to develop the "Silverlight" application by implementing a "Hello World" program.
1. preparations:
To do well, you must first sharpen your tools. First, we need to install the tools required to develop the Silverlight program. The details are as follows:
Microsoft Silverlight 1.1 Alpha: A file required to develop a Silverlight program. : Http://go.microsoft.com/fwlink? Linkid = 95888 & clcid = 0x409
Microsoft Visual Studio 2008 Beta 2: development tool. : Http://go.microsoft.com /? Linkid = 7175498
Silverlight Tools for VS 2008 Beta 2: Develop the Silverlight program plug-in VS2008. : Http://www.microsoft.com/downloads/details.aspx? FamilyID = b52aeb39-1f10-49a6-85fc-a0a19cac99af & DisplayLang = en
Expression Blend 2 August Preview: design tool. : Http://www.microsoft.com/downloads/details.aspx? FamilyID = 69540337-b619-4a47-ac27-52d8af3a7830 & DisplayLang = en
In addition, because Silverlight uses XAML to present the interface, we also need to have a little understanding of the XAML syntax. See http://msdn2.microsoft.com/en-us/library/ms752059.aspx for details
2. Create a project
Now, we officially start developing the Silverlight program. Open VS2008 and select "File"-"New Project" from the menu ". In the "New Project" dialog box, select Visual C # As the development language, and then select Silverlight. In the "Templates" list, select the Silverlight Project. Name the project "HelloSilverlight" and click "OK.
As you can see, VS2008 generates the most basic file for running the Silverlight Program (Figure 1 ):
TestPage.html: a standard HTML webpage that provides containers for the display of Silverlight programs.
TestPage.html. js: contains the code used to download and instantiate the Silverlight control.
Silverlight. js: defines the functions to be called by testpage.html. js.
Page. xaml: The most important file that defines the content displayed by Silverlight.
Page. xaml. cs: Save the managed code.
 
Figure 1 Silverlight Project

Add Element

Now, we can start writing XMAL code to add the content to be displayed. However, VS2008 does not support design views and cannot see the results. Then you can use Expression Blend 2, another tool.
Run Expression Blend 2 to open the "HelloSilverlight" project created earlier. Select "TextBlock" from the toolbar on the left to add text to the program. Then, set the attributes of the TextBlock element through the "Property" Panel on the right. For example, set Name to txtHello and the font color to blue. Result 2.

Figure 2 Add a TextBlock Element

Add animation effect

Next we will add more animated effects to the text. Click ">" on the "Object and Timeline" Panel to bring up the "Storyboard" panel. Click the "+" button to open the "Create Storyboard" dialog box (Figure 3 ). Enter "Name" and click "OK". A Timeline is added to the "Object and Timeline" panel.

Figure 3 "Create Storyboard" dialog box

Select "txtHello" on the "Object and Timeline" Panel, change "Opacity" to 0, and click "Record Keyframe" to insert a key frame, then, drag the yellow timeline to 5 seconds, change "Opacity" to 100, and click "Record Keyframe" to insert the key frame. An animation is complete. You can click the "Play" button in the upper part of the panel to preview the effect (figure 4 ).

Figure 4 preview the animation effect

Add managed code
The above are all the design tools used. Now, we use VS2008 to open the project and add the C # code to Page. xaml. cs to increase the user interaction experience for the program.
Add the following code for the mouse movement/removal event of the TextBlock element:

 Public void Page_Loaded (object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent ();
// Declare the event
TxtHello. MouseEnter + = new MouseEventHandler (txtHello_MouseEnter );
TxtHello. MouseLeave + = new EventHandler (txtHello_MouseLeave );
}

Brush oldBrush;
// Move the cursor in
Private void txtHello_MouseEnter (object sender, MouseEventArgs e)
{
Timeline1.Pause (); // pause the animation
OldBrush = txtHello. Foreground;
// Change the text color to red
TxtHello. Foreground = new System. Windows. Media. SolidColorBrush (Colors. Red );
}
// Move the mouse out
Private void txtHello_MouseLeave (object sender, EventArgs e)
{
// Restore status
Timeline1.Resume ();
TxtHello. Foreground = oldBrush;
}

It can be seen that this is no different from compiling a common C # program. Finally, compile and run the program, as shown in Figure 5.

Figure 5 mouse movement

3. Summary

Through the above demonstration, we can see that Microsoft provides powerful tools for Silverlight development, helping designers and developers work together. In addition, if developers are familiar with Microsoft. NET and Web development technologies, they already have the ability to develop Silverlight programs. If you are engaged in RIA development, Silverlight will be a good choice.

1

(Published on IT168 technology channel)Http://tech.it168.com/msoft/2007-09-02/200709022105892.shtml