This post is a starting demonstration of how to get started with Silverlight 1.0 for the first time, mainly what all the files are within the default template. Once you have an idea of this, you should be in a position to write your own RIA (Rich Internet Application). I’ve already discussed What do you need to get started, so I won’t go into that again.
I will be using Visual Studio 2005 and Silverlight 1.0, this is because 1.0 has a Go Live license plus I’ll cover 1.1 in later posts. After you have installed the bits, you will have a new Silverlight Project Template in VS2005. If it doesn’t appear, you need to drop the template in the SDK into your templates folder in My DocumentsVisual Studio 2005. Remember, Silverlight 1.0 only supports JavaScript programming model.
Within the default project, you have all the code for a simple button which when clicked displays a JavaScript alert dialog box, but this includes the core sections of code to solve core tasks. The files are as follows:
Default.html: Page contents, contains the DIV which contains the Silverlight control
Default.html.js: Javascript code to create Silverlight host
Scene.xaml: XAML for the button, includes storyboards as a resource.
Scene.xaml.js: Javascript code for the XAML. Contains code to setup event handlers, and the code for the actual handler itself.
Silverlight.js: Code from Microsoft which detects if Silverlight is installed. This is best just left along.
That’s an overview of which files are actually included/required. Let’s have a dive into what they actually have inside them and which bits are important.
Default.html
This is the first page which a user sees, by default, and there is two main sections inside this file.
First main section is the references to the various JavaScript files within the files within the solution. By default the following are included:
1 <script type="text/javascript" src="Silverlight.js">script> 2 <script type="text/javascript" src="Default.html.js">script> 3 <script type="text/javascript" src="Scene.xaml.js">script>
The order in which these appear is very important, the reference to Silverlight.js must be first so it can do the detecting of if it is installed or not. When referenced, variables/functions within one javascript file can reference items in the other file, however this does make them tightly coupled and could lean to problems on large applications.
The next section is the DIV and code to create the Silverlight object
1 <div id="SilverlightControlHost"> 2 <script type="text/javascript"> 3 createSilverlight(); 4 script> 5 div>
The DIV id is used to locate where to place the control so name this carefully. The createSilverlight() function is within Default.html.js and has the code to create the host and link it to the XAML. This DIV can be anywhere on the page and named anything, however the javascript code will have to change to relate to this name change. If you have two controls, you will need two creation scripts.
Default.html.js
The main function within this file is the createSilverlight() which creates the Silverlight host. Firstly, it creates an object which links to the XAML file, this needs to relate to your own object. The source property relates to the xaml, parentElement relates to the DIV where you want the Silverlight control to be hosted in your HTML. The id will be for the actual ID of the Silverlight control itself, this will be used for referencing in your javascript as you will see later down. Properties then relate to the size and various other properties which you might require. Version 0.9 is currently Beta 1.
1 function createSilverlight() 2 { 3 var scene = new SilverlightJSApplication2.Scene(); 4 Sys.Silverlight.createObjectEx({ 5 source: "Scene.xaml", 6 parentElement: document.getElementById("SilverlightControlHost"), 7 id: "SilverlightControl", 8 properties: { 9 width: "130", 10 height: "100", 11 version: "0.9" 12 }, 13 events: { 14 onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad) 15 } 16 }); 17 }
This javascript could do anything you like, for example calling web services or starting an animation in the xaml, with3rd party frameworks such as Altas/ASP.net Ajax client side files supported.
Scene.xaml
This file contains your XAML code. This can be development using either Visual Studio 2005/Orcas or Blend 2. Using Blend 1, you have to do a few work arounds for it to work whereas Blend 2 fully supports Silverlight. This also includes the storyboards/animations, when creating a storyboard using Blend 2, there is a tick box which is can be ticked to make the storyboard a resource, I prefer this as its is less code and easier to program against using code-behind.
1 <Canvas.Resources> 2 <Storyboard x:Name="mouseEnter"> 3 <ColorAnimation Duration="00:00:00.25" To="#3DFFFFFF" Storyboard.TargetName="highlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" /> 4 Storyboard> 5 Canvas.Resources>
Above is how it looks as a resource, where as below is how it looks without being a resource.
1 <Canvas.Triggers> 2 <EventTrigger RoutedEvent="Canvas.Loaded"> 3 <BeginStoryboard> 4 <Storyboard x:Name="Timeline1"> 5 <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 6 <SplineColorKeyFrame KeyTime="00:00:01.6000000" Value="#66D79B03"/> 7 ColorAnimationUsingKeyFrames> 8 Storyboard> 9 BeginStoryboard> 10 EventTrigger> 11 Canvas.Triggers>
If you know XAML, then you shouldn’t have a problem understanding this and the contents of the file.
Scene.xaml.js
This file contains some interesting code. As mentioned, this contains the event handlers for the xaml, with the first function being called is handleLoad: function(control, userContext, rootElement).
Control is the Silverlight control itself and you can do things like this.control.content.findName(“myControl”) to gain access to a controls reference in the XAML file. The rootElement is the root canvas for the control.
For example, to add an event handler to the canvas, you would do:
1 this.rootElement.addEventListener("MouseLeftButtonDown", Sys.Silverlight.createDelegate(this, this.handleMouseDown));
When the MouseLeftButtonDown (onClick) event occurs on the rootElement (canvas), the handleMouseDown function is executed.
1 handleMouseDown: function(sender, eventArgs) 2 { 3 var mouseDownAnimation = sender.findName("mouseDown"); 4 mouseDownAnimation.begin(); 5 },
This asks the sender, the canvas, for the resource mouseDown, in this case a storyboard, and then calls the begin() function on that item which starts the animation. Remember, this is a prototype and so is coded differently than normal javascript, main thing is to be careful with your comers, this follow all the end functions apart from the last.
Silverlight.js
This is provided by Microsoft, and is included in the SDK. There is a lot of code, shouldn’t really need to modify it. Just remember to included it in all of your projects and reference it in your HTML. This way you will get a nice image if the user does not have Silverlight installed.
Summary
I hope I have provided you with a good understanding of what everything is within Silverlight. If you have any problems, the best way I found is to look at the default and follow that. Hope this has been of some help for you. Any questions, give me a shout.