Table of Contents

---

1.3Silverlight Basics

1.3.1Create a project in Expression Blend

Create a new project in Expression Blend by choosing type Silverlight Application (JavaScript) from the list of available project types. This will automatically create a project with the following items:

• Default.html is the hosting html page for the Silverlight application.
• Default.html.js is the JavaScript code that creates Silverlight controls. It has a JS function (CreateSilverLight()) that invokes Sys.Silverlight.CreateObjectEx(); the latter takes the application main XAML file as the first argument, the HTML element that will host the Silverlight control as a second argument, ID of the Silverlight control, and a set of simple properties.
• Silverlight.js contains a set of JS functions responsible for necessary Silverlight plumbing, such as Silverlight plug-in detection, browser support check, and actual creation of plug-in instance.
• Scene.xaml is the default minimum scene file in which your Silverlight application will be created. This is the game's main XAML file. This file is passed to the main JS function mentioned above to initiate the game's controls.
• Scene.xaml.js is a basic code behind file with a couple of sample event handlers.

Expression Blend can be used to design user interfaces; developers can use the Expression Blend project in Microsoft Visual Studio 2005 for a better development experience. Expression Blend project has a common file format, and separate views for design and code.
Designers can create design assets in Microsoft Expression Design and/or any other creative development tool and incorporate the output into Expression Blend.

1.3.2XAML Basics

XAML (eXtensible Application Markup Language) is an XML document that describes the UI of an application. The following example shows a basic XAML document that has a root Canvas element, and a rectangle that works as the background. A canvas is a Silverlight container element. The elements inside a canvas are absolutely positioned just like Windows forms controls. One interesting feature about XAML is attached properties. An example of an attached property is the CanvasTop property of the Rectangle element. Attached properties are used because the Rectangle element is not aware it is placed inside a canvas, so attached properties provide extensibility for Silverlight elements. If you need more information about XAML, you can watch this video by Ernie Booth

		<Canvas
		    xmlns="http://schemas.microsoft.com/client/2007"
		    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		    Width="800" Height="600" x:Name="Root">
		<Rectangle x:Name="Background" Stretch="Fill" Width="800" 
		    Height="600" Canvas.Top="0" Canvas.Left="0">
		      <Rectangle.Fill>
		        <LinearGradientBrush StartPoint="0.5,1.10356" 
		        EndPoint="0.5,0.275067">
		          <GradientStop Color="#FE000000" Offset="0"/>
		          <GradientStop Color="#E800003A" Offset="1"/>
		        </LinearGradientBrush>
		      </Rectangle.Fill>
		    </Rectangle>
		</Canvas>

1.3.3Event Handling

An event handler can be defined in XAML using the following syntax:

		<Canvas
		    Loaded="javascript:startGame"

In the JavaScript file, the handler can be defined using the following syntax:

		function startGame(sender, args){
		    var control = sender.getHost();
		}

1.3.4Setting Properties

Properties (referred to under XAML Basics, section 1.3.2) are basically the normal or attached attributes of an XAML element.

These properties get set to manipulate the various XAML elements (objects). The following example shows how to set normal properties and attached properties of XAML elements:

		var element = control.content.findName("ElementName");
		element.Visibility = "Visible";
		element["Canvas.Top"] = 100;

1.3.5Creating Silverlight Elements at Runtime

The createFromXaml method can be used to create XAML elements at runtime. The function takes a single parameter to specify the XAML string. The following example shows how to create a rectangle at runtime using the createFromXaml method:

		var rectangle = 
		    control.content.createFromXaml(
		      "<Rectangle 
		        Stretch=\"Fill\" 
		        Width=\"800\" 
		        Height=\"600\"/>");

1.3.6Media

Silverlight supports multiple video and audio formats including WMV, WMA, and MP3. The following example shows how we define a sound effect for the game:

		<MediaElement x:Name="ball_bounces_off_brick_mp3" 
		    Width="0" Height="0" 
		    Source="sounds/breakout sfx/ball-bounces-off-brick.mp3" 
		    Stretch="Fill" Volume="1" 
		    AutoPlay="false"/>

The interesting attributes in the previous examples are:

• x:Name: This is the name we use to reference the media element in the JavaScript code.
• AutoPlay: This property is set to false as we will control the playback through code.

1.3.7Animation

Animation is an illusion created by cycling quickly through a series of images. In Silverlight, animation is created by applying animation to an object’s individual properties. For example, to make an object fade out, an opacity’s property is changed from 100% to 0% across a defined time. The following example shows how to do this:

		<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
			Storyboard.TargetName="image" 
			Storyboard.TargetProperty="(UIElement.Opacity)">
		       <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
		       <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
		</DoubleAnimationUsingKeyFrames>

The previous example fades in an object by changing the opacity property from 0 to 1 in 1 second. The animation is designed by Expression Blend and uses keyframes as a base to define key points of change through its lifetime.