First of all, you have to create a Silverlight application and see how it works in a web browser. To best understand how it works, we can see it in action and experience a vector graphic moving on the screen while the mouse pointer changes its position. These are the steps to do it:
1. Create a new C# project using the Silverlight Application template in Visual Studio or Visual C# Express. Use SilverlightMonster.Web as the project's name.
2. The IDE is going to present a dialog box showing many options for a new Silverlight application. Activate the Host the Silverlight application in a new Web site checkbox, as shown in the following screenshot:
3. Click on OK and the IDE will create an empty Silverlight application, including a Web project. The Web project will allow us to change some properties to configure the Silverlight runtime.
4. Right-click on
SilverlightMonster(the main project) in the Solution Explorer and select Add | Existing item... from the context menu that appears.5. Choose the destination folder for the previously generated XAML files (
C:\Silverlight3D\Invaders\GAME_XAML) and select a vector asset (ALIEN_01_01.xaml). Now click on Add.6. Select the recently added item (
ALIEN_01_01.xaml) in Solution Explorer and right-click on it. You will not be able to see the graphic in the IDE's screen. Select Open in Expression Blend. A security-warning dialog box will appear. Do not worry; the project is secure. Click on Yes. Now, the project will be opened in Expression Blend and you will see the vector graphic on the screen, as shown in the following picture:
7. Right-click on the canvas named Layer_3 under Objects and Timeline window, and select Make Into UserControl... in the context menu that appears. A dialog box will appear.
8. Enter the name Ghost for this new
UserControland click on OK. A new item will be added to the SilverlightMonster project namedGhost.xaml. Save the changes and go back to Visual Studio or Visual C#, and reload the contents of the solution.9. Now, you will be able to see the graphics representation of this UserControl in Visual Studio or Visual C#. Expand
Ghost.xamlin the Solution explorer and you will findGhost.xaml.cs(the C# code related to the XAML UserControl), as shown in the following picture:Note
Silverlight 3 RTW (Ready To Web) made the default XAML preview capabilities invisible for Silverlight projects in Visual C# 2008. We have to resize the preview panel in order to see the graphics representation. The preview capabilities are available without changes in Visual Studio 2010 or Visual C# 2010.
You created your first Silverlight application showing the ghost that will be a part of your game. It required too many steps, and you had to combine two tools: Visual Studio or Visual C#, and Expression Blend. It seems complex, but once you get used to working with graphic manipulation tools and development environments to create Silverlight games, it is going to be easier.
We created a new web site to host our Silverlight application because that is going to allow us to change many advanced parameters related to Silverlight's runtime that are very useful to improve the performance of our games.
We created a UserControl from an existing XAML-scalable vector illustration. A UserControl has its XAML representation and provides its own logic.