SilverLight development procedure

What is SilverLight?

　　SilverlightA cross-browser and cross-platform plug-in that delivers a dazzling multimedia experience on Microsoft. NET and Web applications with rich interactive functions.

This section may be difficult to understand. The Silverlight Shanghai Development Team Blog provides a detailed description: for Internet users, Silverlight is a simple plug-in program for installation. After installing this plug-in, you can run the Silverlight application of the corresponding version in multiple browsers on Windows and Macintosh, enjoy video sharing, online games, advertisement animation, and interactive network services. For developers, Silverlight is a Web rendering technology that integrates multiple Microsoft technologies. It provides a development framework and supports seamless integration of images of any size by Using Vector-Based Image Layer Technology. the Web development environment, including NET and AJAX, implements seamless connection. Silverlight enables developers to better collaborate and effectively create a wide range of Web applications-Silverlight applications-with rich content and beautiful interfaces that can run in multiple Windows and Macintosh browsers.

In short, Silverlight is a cross-browser, cross-platform plug-in that brings the next generation of. NET-based media experience and rich interactive applications to the network. For mainstream browsers running on Macintosh and Windows, Silverlight provides a unified and rich user experience. Using the small browser plug-in Silverlight, videos, interactive content, and other applications can be integrated in good condition.

In this article, we will use the new Silverlight technology to create a small game: Lights Out. 1. the gameplay is like this: all logos have two states: bright and dark. At the beginning, all Windows logos are dark. When a player clicks a logo, the Windows logo and its four logos on the top and bottom change to the opposite state. After several clicks, all the logos can be highlighted or dimmed to win. 2. The sample code can be downloaded at http://www.codeproject.com/silverlight/silverlightsout/silverlightsout.zip

Figure 1 Figure 2

　　Development tools and platforms

· Runtimes

Download Silverlight1.1 Alpha to use the. NET language

· Microsoft Silverlight 1.1 Alpha [Download]

Used to view the created Silverlight Program

· Developer Tools

Visual Studio developer tools are required for development.

· Microsoft Visual Studio codename "Orcas" Beta 1 [Download]

　　Next-generation development tools

· Microsoft Silverlight Tools Alpha for Visual Studio codename "Orcas" Beta 1 [Download]

Plug-ins used to create Silverlight applications

· Designer Tools

Download the trial version of the tool for Design

· Expression Blend 2 May Preview [Download]

Professional design tools to create Silverlight Interaction

· Software Development Kit

Contains documents, examples, and plug-in sdks

· Microsoft Silverlight 1.1 Alpha Software Development Kit (SDK) [Download]

Download the SDK to create a Silverlight Web application. This SDK contains documents and examples.

　　Development details

This example includes the following features:

• Dynamically scroll the background of a star chart
• Transparency
• Timer

　　Main Method

　　RandomizeBoard ()

This method handles the initialization of the Board before the game starts. After a loop is completed, ToggleSquare () is randomly called to set the logo to bright or dark.

Private void RandomizeBoard () { // Create a randomizer Random random = new Random (); // Loop through each squares For (int I = 0; I <squares. Count; I ++) { // TY/TY toggle square If (Convert. ToBoolean (random. Next (2 ))) { ToggleSquare (squares [I]); } } }

　　ClickSquare ()

This function is used to manage which logos are clicked by users. First, find the logo name and use the ToggleSquare () function to set it.

Private void ClickSquare (object sender, MouseEventArgs e) { Image image = sender as Image; // cast sender object into Image Int index = squares. IndexOf (image); // get index of clicked square If (index> 4) // make sure we are not on topmost row ToggleSquare (squares [index-5]); // Toggle square above clicked square If (index % 5! = 0) ToggleSquare (squares [index-1]); // Toggle square to left of clicked square ToggleSquare (squares [index]); // toggle clicked square If (index % 5! = 4) ToggleSquare (squares [index + 1]); // Toggle square to right of clicked square If (index <20) // make sure we are not on bottommost row ToggleSquare (squares [index + 5]); // Toggle square below clicked square }

　　ToggleSquare ()

When the logo is clicked, this help method will set all the associated logos (bright-> dark, dark-> bright), and then check whether the Board is in the win status.

Private void ToggleSquare (Image image) { // Check if square is on If (image. Source = vistaLogoOn. Source) { Image. Source = vistaLogoOff. Source; Image. Opacity = 0.50; } Else { Image. Source = vistaLogoOn. Source; Image. Opacity = 0.75; } If (CheckForWin ()) GameStatus. Text = "You Win "; }

　　CheckForWin ()

This help function is used to check whether the checker is in the win state. If all the logos are bright or dark, the player wins.

Private bool CheckForWin () { Int onCount = 0; // assume no square on by default Bool checkForWin = false; // assume player did not win // Loop through all squares For (int I = 0; I <squares. Count; I ++) { If (squares [I]. Source = vistaLogoOn. Source) OnCount ++; } // If all lights are on or off then player wins If (onCount = 0 | onCount = 25) CheckForWin = true; Return checkForWin; }

　　Browser. HtmlTimer

I found that there is an HtmlTimer class in Silverlight1.1. This class is not documented and abandoned. After compilation, VS will have a prompt: 'System. Windows. Browser. HtmlTimer 'is obsolete:' This is not a high-precision timer and is not suitable for short interval animation. An advanced timer version will appear in future versions.

... // Use the browser's HtmlTimer to refresh background regularly System. Windows. Browser. HtmlTimer timer = new System. Windows. Browser. HtmlTimer (); Timer. Interval = 1; Timer. Enabled = true; Timer. Tick + = new EventHandler (timer_Tick ); ... Void timer_Tick (object sender, EventArgs e) { Double currentLeft = (double) background. GetValue (Canvas. LeftProperty ); If (currentLeft <= 0) { // Move background pixels over> Background. SetValue (Canvas. LeftProperty, currentLeft + 2 ); } Else { // Reset backgrounds position Background. SetValue (Canvas. LeftProperty,-340 ); } }

However, System. Windows. Browser. HtmlTimer is the best way to create basic animations.

Reproduced to: http://dev.yesky.com/msdn/130/7643130.shtml