Silverlight Tutorial

The Silverlight Framework

Overview

Microsoft Silverlight is the latest development offering from Microsoft and a logical progression of Microsoft technologies. As stated in the previous modules, Microsoft technologies progressed from separate and isolated development technologies to Active Server Pages (ASP), their first dynamic Web development technology. In order to stay competitive, Microsoft decided to redesign and consolidate all of their development technologies into a single platform, the .NET Framework. The .NET Framework has been wildly successful and popular. One facet of the .NET Framework is ASP .NET. ASP .NET is an extremely powerful Web development environment but, by default, the bulk of the processing is occurring on the server. Web applications will perform better if more processing ochers on the client. In order to improve performance, Microsoft introduced ASP.NET AJAX to extend the client scripting capabilities and improve performance. However, the downside to processing occurring in JavaScript is that JavaScript is executed by the user's browser, hence Microsoft is at the mercy of the browser vendor to correctly interpret and execute the JavaScript in ASP.NET AJAX.

In an effort to take their technologies a step further, Microsoft began studying how they could gain control of the ASP.NET AJAX client-side environment and, at the same time, improve the technology. Microsoft also wanted to determine how to offer the same ability to create incredible user interfaces on the client-side that Windows Presentation Foundation (WPF) offered on the server. As a result, Microsoft created a new downloadable plugin technology that extends the ASP.NET AJAX environment significantly and, at the same time, incorporates much of the functionality and rendering capabilities of WPF. The resulting technology was originally named "WPF/E" (Windows Presentation Foundation / Everywhere) was later renamed to Silverlight.

Silverlight is currently available in two versions: version 1.0 and version 2.0. Version 1.0 was fairly limited in functionality and JavaScript was the only language supported. Version 2.0 includes a gamut of new features and many .NET-compliant programming languages are now supported. The figure below illustrates the differences between version 1.0 and version 2.0 (shown as version 1.1 in this diagram due to the original naming).

Silverlight vs. WPF

Silverlight is a subset of Windows Presentation Foundation that also extends and utilizes many of the features and aspects of ASP.NET AJAX. With the bulk of software development today targeting the Web, many developers question why they need to create WPF applications at all now that Silverlight has arrived. While that is a valid point, the answer is that both technologies have their strengths. Silverlight's strengths lie in its portability over the Web. However, Silverlight is cross platform and cross browser compliant. As such, it cannot take advantage or be reliant upon any particular environment or platform. More advanced graphic features require hardware support and must take advantage of a platform features. As such, WPF provides advanced 3D graphic features that perform very well while Silverlight is not able to provide these features at this time.

Furthermore, Silverlight must function in the realm of a sandbox in order to provide a secure environment. However, the sandbox does limit Silverlight's ability to directly interact with the host operating system and perform direct IO functionality.

The powers and limitations of Silverlight and WPF are really a result of the environment that each is designed to perform in. Silverlight is a subset of WPF only because the full gamut of WPF functionality cannot be utilized in Silverlight's world.

Silverlight Performance

Silverlight has many obvious competitive advantages. a strong advantage to using Silverlight is its blazing fast rendering engine and performance. There are a couple experiments out there on the Web that illustrate the performance advantages of Silverlight. The bouncing balls experiment, located at http://bubblemark.com/silverlight_clr.htm, is a great example and can be used to compare rendering speeds of the most popular competitive development environments.

Silverlight Tools

With Silverlight being so popular, there are already many editors and design tools being planned by vendors. The two most common Silverlight design and development tools are:

Visual Studio 2008

Visual Studio is Microsoft's premiere integrate software development environment. Visual Studio now hosts management utilities as well as development tools. The figure below shows Visual Studio 2008.

At this time, Visual Studio 2008 offers the ability to build Silverlight applications by using XAML but does not offer a visual designer.

Expression Blend 2

Microsoft has introduced a whole new line of cutting edge tools for use by designers, Microsoft Expression Suite. Microsoft Expression Suite includes a tool, Microsoft Expression Blend, that is a Silverlight development tool targeting designers. In a brilliant move, Microsoft designed the Expression suite of tools to integrate nicely with Visual Studio. This comes close to completing the cycle of tools needed to work with the .NET Framework technologies and architectures. ASP.NET, for instance, was redesigned with code behind files containing compilable code so that developers could work on programming language code and components while designers could work on the markup and user interface.

Microsoft Expression Blend 2 is Microsoft's visual Silverlight design tool.

Lunar Eclipse

In the first module, we mentioned that just as there is a version of the .NET Framework that runs locally on the Linux operating system, the Mono Project, there is a version of the Silverlight plugin that also runs locally on the Linux operating system, Moonlight. Lunar Eclipse is a new design tool created by open source developers that was created to run locally on Linux and design Moonlight applications.

Silverlight Languages

The Silverlight plugin offers a CLR execution environment and a .NET Framework base class library (BCL) that is hosted in the user's browser and is used to execute code. Silverlight is a progression of ASP.NET AJAX. ASP.NET AJAX extends the capabilities of JavaScript through a JavaScript library so that JavaScript is much more object oriented and provides more functionality. The Silverlight execution engine further extends JavaScript and the browser-hosted execution environment.

Dynamic Language Runtime (DLR)

There are currently two versions of Silverlight, version 1.0 and version 2.0. In version 1.0, the only language available is JavaScript. Version 2.0 extends the execution environment and provides the ability to program Silverlight applications using several more advanced programming languages. Furthermore, version 2.0 not only opens up the Silverlight CLR for use by more languages but also allows the languages to seamlessly intercommunicate through the use of a Dynamic Language Runtime (DLR).

A dynamic programming language is one in which the language, and the language runtime, are designed to dynamically extend application capabilities at runtime. For instance, a language might be able to load, compile, and assimilate code that is read at runtime but did not exist at compile time. The Silverlight DLR enables Silverlight to take advantage of dynamic language functionality.

DLR Console

As a method of testing the DLR and prototyping Silverlight code and applications, Microsoft developed the DLR Console. Microsoft deployed the DLR Console to Microsoft CodePlex and made it freely available for developers to extend and experiment with. The DLR Console is available for download at http://silverlight.net/community/gallerydetail.aspx?cat=2&sort=2. The DLR Console version that is available on CodePlex supports prototyping XAML by using JScript and Python. The DLR Console is shown in the figure below.

JavaScript

As mentioned, in Silverlight version 1.0, JavaScript was the only language that could be utilized. Creating Silverlight applications by using JavaScript is very easy but is not directly available as an option in Visual Studio. Instead, a very tiny amount of hand coding will be necessary; in the simplest form, less than 10 lines of markup. In the simplest form, start with an HTML page and insert an <object> tag, generally inside of a <div> tag as shown in the markup listing below. JavaScript supports most of the features of a dynamic language, by design.

  
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>Simple Silverlight JavaScript</title>
 </head>
 <body>
     <div id="SilverlightHost">
            <object id="sl" height="400" width="800" type="application/ag-plugin">
                <param name="source" value="Page.xaml" />
            </object>
        </div>
 </body>
</html>

Notice that the <param> tag identifies the Page.xaml file to be loaded. The XAML file is also extremely simple in this example as shown in the markup below.

  
  <Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="640"
        Height="480"
        Background="White"
        >
  <TextBlock x:Name="myText" FontFamily="Segoe UI" FontSize="14" Text="This is a great course" />
</Canvas>

That illustrates the simplest method of embedding Silverlight into an HTML page by using JavaScript. However, by incorporating the JavaScript file that is distributed by Microsoft for use with Silverlight, your implementation will more well rounded. For instance, it will prompt the user to download the Silverlight plugin if it is not already installed. The example markup below illustrates implementing Silverlight in an HTML page with reference to the supplied JavaScript file.

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
    <title>Silverlight Project Test Page </title>

    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="TestPage.html.js"></script>
    <script type="text/javascript">
        function onLoad (sender, args, root) {
            var myText = root.findName("myText");
            myText.FontSize = 40;
        }
    </script>
    <style type="text/css">
        .silverlightHost { width: 640px; height: 480px; }
    </style>
</head>

<body>
    <div id="SilverlightControlHost" class="silverlightHost" >
        <script type="text/javascript">
            createSilverlight();
        </script>
    </div>
</body>
</html>

The above markup and included JavaScript files are the basis for all Silverlight implementations at this point. When coding Silverlight by using JavaScript, we'll insert the JavaScript directly in the HTML page. Prior to being able to do anything effective, we need to add an id to the XAML.

Once the TextBlock has been assigned a name, it can be manipulated by using JavaScript. Next, we need to interact with the XAML through some type of event. The most commonly used event, just as with ASP.NET (the Load event), is the onLoad event. We can wire up the onLoad event in the JavaScript file associated with the page; in this scenario, TestPage.html.js. The resulting JavaScript is shown below.

// JScript source code

//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
 Silverlight.createObjectEx({
  source: "Page.xaml",
  parentElement: document.getElementById("SilverlightControlHost"),
  id: "SilverlightControl",
  properties: {
   width: "100%",
   height: "100%",
   version: "1.1",
   enableHtmlAccess: "true"
  },
  events: {onLoad:onLoad}
 });
    
 // Give the keyboard focus to the Silverlight control by default
    document.body.onload = function() {
      var silverlightControl = document.getElementById('SilverlightControl');
      if (silverlightControl)
      silverlightControl.focus();
    }
}

Finally, in order to complete this scenario, we need to create the onLoad handler in our HTML page. A JavaScript event handler for Silverlight will receive three parameters. The first is a reference to the sending container object, or the <div> element, the second includes optional arguments that have not been passed in this example, and the third is a reference to the root element of the XAML document. We can use the root argument with the findName method to locate any element with a name attribute assigned to it in the XAML file. The "myText" element and modifies the font size to be 40.

Managed JScript

Microsoft extended the standard JavaScript language to add extended capabilities for use with Microsoft technologies and tools such as Internet Explorer. Microsoft's flavor of JavaScript was named JScript. Microsoft released an advanced version of JScript for use with the .NET Framework in version 1.0 of the .NET Framework. The advanced version of JScript is called, not surprisingly, JScript.NET. A new version of JScript was later released for use with Silverlight version 2.0 and was named Managed JScript.

C#

C# version 3.0 is also a dynamic language. The only difference between coding a Silverlight application by using JavaScript and by using a .NET programming language in Silverlight version 2.0 is that the XAML file identifies a code behind file through the x:Class attribute as shown below.

  
  <Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Loaded="Page_Loaded" 
        x:Class="SLExampleCS.Page;assembly=ClientBin/SLExampleCS.dll"
        Width="640"
        Height="480"
        Background="White"
        >
    <TextBlock x:Name="myText" FontFamily="Segoe UI" FontSize="12" Text="This is a great course" />
</Canvas>

Furthermore, event handlers will now be wired into the Silverlight picture through the XAML file as shown above. In the example above, the Loaded event is wired up to the Page_Loaded handler in the code behind file. The associated code behind file is shown below.

  
 using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SLExampleCS
{
    public partial class Page : Canvas
    {
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();

            myText.FontSize = 40;
        }
    }
}

The sections below simply illustrate the difference in language syntax as the applications are wired up in the exact same manner illustrated above.

Visual Basic

The Visual Basic version of the code behind is shown below.

  
Partial Public Class Page
  Inherits Canvas

  Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
    ' Required to initialize variables
    InitializeComponent()

    myText.FontSize = 40
  End Sub
End Class

VBx

Visual Basic is currently in version 9.0 but does not fulfill the requirements of being a dynamic programming language yet. However, version 10.0 is currently being developed and is named VBx. VBx will be a new dynamic version of Visual Basic that make it much more streamlined for creating Silverlight applications.

IronPython

IronPython is a dynamic version of the Python programming language designed for use in Silverlight 2.0. Coverage of the IronPython programming language is beyond the scope of this course.

IronRuby

IronRuby is another dynamic programming language that is designed for use in Silverlight 2.0 and was modeled after the Ruby programming language. Coverage of the IronRuby programming language is beyond the scope of this course.

Windows Live Services

Over the past year or two, Microsoft has revamped their suite of online tools and utilities. For instance, Microsoft's online email service, Hotmail, has been redesigned and renamed to Windows Live Mail. In additional to extending the existing Windows Live Services, Microsoft will also be offering new services in the coming year. These services will be designed using Silverlight in order to provide a richer user experience.

Microsoft now also offers a new online utility specifically targeting Silverlight developers, the Silverlight Streaming service. The Silverlight Streaming service is used to host and test Silverlight applications. The Silverlight Streaming service is a free service that is currently in beta and is located at https://silverlight.live.com/.

Microsoft and other vendors are also actively developing new online applications using Silverlight. Another cool example of Silverlight is the Tafiti search and research tool. Tafiti is located at http://www.tafiti.com/. The figure below illustrates the Tafiti utility.

Tafiti also provides an innovative tree view that displays search results in an expanded literal tree view as shown in the figure below. The tree can be grown to display more branches and leafs or shrunk by using the slider at the bottom of the page.

Other Services

Microsoft will be redesigning other services to also take advantage of Silverlight going forward including Windows Live Search Maps and the Windows Live SoapBox.

Microsoft PopFly

Another service that should be noted here is Microsoft Popfly. Popfly utilizes Silverlight and allows users to create mashups, mashup applications, and Web pages online. A mashup is an online application that a user can create through visual tools with no programming or development experience or interaction required. Microsoft Popfly is located at http://www.popfly.ms/. The figure below shows the Popfly Web site.

Popfly also provides an explorer that can be installed and integrated with Visual Studio as shown in the figure below.

Once the Popfly explorer is installed, new Popfly Web sites can easily be created by using Visual Studio. The New Web Site dialog with the Popfly Web Site option selected is shown in the figure below.

Controls

Silverlight version 1.0 shipped with a minimal set of controls included. Version 2.0, as of the time of this writing, ships with even fewer controls that focus on shapes, images, and animation controls but there are no standard user controls, such as buttons and textboxes, included. Microsoft has stated that when version 2.0 ships in production, it will include many user controls. For the time being, however, your options are to either create custom controls or to utilize third party controls.

Custom controls can be created by using JavaScript or a supported .NET Framework language.

Third party vendors that create Silverlight controls at this time include:

• ComponentOne (http://www.componentone.com/)
• GOA WinForms (http://www.netikatech.com/)

This course will illustrate using controls from ComponentOne until Microsoft releases controls for Silverlight.

Creating a Silverlight Application

Now that we have a basic understanding of how some of the aspects of a Silverlight application, we should get started by building the fantasy picks page by using Silverlight.

The Silverlight Project

The first thing to do when creating a Silverlight application by using Visual Studio is to create a new project. The fantasy picks application will be created using Silverlight 2.0 and C#. The New Project dialog is shown in the figure below.

When the new project is created, some files will be provided to get started with:

• TestPage.html - this is the basic HTML page for starting with. In this example, we won't modify this page at all.
• TestPage.html.js - this is code behind file for the test HTML and it is, obviously, written in JavaScript. In this example, we won't modify this file at all.
• Silverlight.js - this is the standard Silverlight framework file that is written in JavaScript. We won't ever modify this file.
• Page.xaml - this is the basic XAML file for starting with. The bulk of our work in this example will happen in this file.
• Page.xaml.cs - this is the code behind file for the XAML document and it is written in C#. We'll add a couple lines of code to this file.

Our goal is to create a basic version of the fantasy picks page used in previous modules. The fantasy picks page is shown in the figure below.

The Silverlight XAML

First, open the TestPage.html page and assign it a new title of My Fantasy Picks. You can also rename the TestPage.html and TestPage.html.js files if you'd like.

Next, we need to set the background of the page. Bear in mind that Silverlight XAML uses a <Canvas> element to represent the document. You can either configure the background through the XAML editor in Visual Studio 2008 or open Expression Blend 2 and set the background using the visual editor.

If you choose to use Expression Blend 2 to configure the background, open Expression Blend and then open the project. From the project, open the Page.xaml file and set the background using the sidebar panel. The page edified using Expression Blend is shown in the figure below.

Once complete, we can walk through the process of adding controls to our page. Due to the current lack of controls, it is easiest to add controls to our page declaratively by using XAML in Visual Studio 2008.

Bear in mind that we are now working in client-side code in our code behind file. With the code behind file being written in a server-side language, it's easy to forget that the code contained therein will execute on the client. As such, if a Silverlight application must display data from a server-side data source, it must connect to that data source over the Web. The easiest method for retrieving data over the Web will be to utilize a Web service. We'll cover Silverlight using Web services in a later chapter. For now, to make life easy on ourselves, the button click event will display a literal string value. The resulting Silverlight application is shown in the following figure.

The XAML that was used to create the Silverlight form in the figure above is shown in the listing below.

  <Canvas
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:c1="clr-namespace:C1.Silverlight;assembly=ClientBin/C1.Silverlight.dll"
        x:Name="parentCanvas" 
        Loaded="Page_Loaded" 
        x:Class="MyFantasyPicks.Page;assembly=ClientBin/MyFantasyPicks.dll"
        Width="640"
        Height="480"
        >
 <Canvas.Background>
  <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
   <GradientStop Color="#FF000000" Offset="0"/>
   <GradientStop Color="#FF96B178" Offset="1"/>
  </LinearGradientBrush>
 </Canvas.Background>
 
 <TextBlock Width="598" Height="25" Canvas.Left="25" Canvas.Top="50" Text="Welcome to the Fantasy Manager" Foreground="#FFE4F6CC" FontFamily="Segoe UI" FontSize="18"/>
 <Rectangle Width="598" Height="1" Fill="#FFE4F6CC" Stroke="#FFE4F6CC" Canvas.Left="25" Canvas.Top="75" StrokeThickness="0.5"/>
    <c1:Button AutoHeight="False" AutoWidth="False" Height="25" Width="200" Canvas.Left="25" Canvas.Top="80" Text="Display My Fantasy Picks" Click="GetPicks" />
    <Rectangle Width="598" Height="1" Fill="#FFE4F6CC" Stroke="#FFE4F6CC" Canvas.Left="25" Canvas.Top="110" StrokeThickness="0.5"/>
    <TextBlock x:Name="tbPicks" Height="150" Width="598" Canvas.Left="25" Canvas.Top="115" FontFamily="Segoe UI" FontSize="13" Foreground="#FF4FAFEA" Text="" FontWeight="Normal" />
    <Rectangle Width="598" Height="1" Fill="#FFE4F6CC" Stroke="#FFE4F6CC" Canvas.Left="25" Canvas.Top="270" StrokeThickness="0.5"/>
    <TextBlock Width="598" Height="25" Canvas.Left="25" Canvas.Top="275" Text="copyright 2007 - fantasy league manager" Foreground="#FFE4F6CC" FontFamily="Segoe UI" FontSize="10" />
</Canvas>
  

The click event handler that handles the button click is shown in the code snippet below.

  using System;
using System.Linq;
using System.Xml;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
using System.Net;
using System.Text;
using System.Windows.Browser;
using System.Windows.Browser.Net;

namespace MyFantasyPicks
{
    public partial class Page : Canvas
    {
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();
        }

        protected void GetPicks(object sender, EventArgs e)
        {

            tbPicks.Text = "My fantasy picks for week 1 are blah, blah, blah...";
        }
    }
}
  

Creating a Silverlight Animation

Creating animations for Silverlight can be a simple process, depending on the animation in mind. The tool to use for creating animation is Expression Blend 2. Let's create a simple spinning circle (reminiscent of the one displayed in Windows Vista when waiting on a lengthy process to complete) animation and display it in a Silverlight application. Start by creating a new Silverlight application in Visual Studio 2008.

Once created, open the solution for the application just created inside of Expression Blend. You can easily open a Visual Studio 2008 solution in Expression Blend by right-clicking a .xaml file in the Visual Studio 2008 Solution Explorer and selecting the option to open it in Expression Blend. When you open a new solution in Expression Blend, you will be presented with a blank slate to work with.

To create the spinning animation, drag an ellipse from the toolbar onto the XAML design area. With the ellipse selected, use the Properties sheet to configure the ellipse similar to that shown in the figure below.

On the Objects and Timeline pane, select the Open, Create, or Manage Storyboards button. Click the add (+) button to create a new timeline. The Create Storyboard dialog should be presented as shown in the following figure.

Assign the new timeline a name and click OK. Next, select a point on the timeline and modify the ellipse in some manner. In this example, we want to grab the corner anchor of the ellipse using the mouse and spin the ellipse around several times. You can test the animation by clicking the Play button on the timeline pane.

If you want the animation to loop forever, in Expression Blend, select the timeline and in the Properties sheet, set the RepeatBehavior to "Forever". You can save the page and go back to Visual Studio 2008.

In Visual Studio, if you run the Silverlight application as it exists right out of Expression Blend, the animation may appear but won't play. To get the animation to play, you must call the Begin method of the StoryBoard. In order to be able to call the Begin method of the StoryBoard, the StoryBoard must have a name assigned to it. Once the StoryBoard has a name, you can call the Begin method from the Silverlight code behind file as shown in the code snippet below.

public void Page_Loaded(object o, EventArgs e) {

  // Required to initialize variables
  InitializeComponent();
  Spin.Begin();
}

The resulting animated Silverlight page is shown in the figure below.

LAB: Create a Silverlight Testing Tool

In this lab, you will create a random quote display by using Silverlight. The tool will include an animation and will store exam data in an array for the time being.

All material in this Silverlight Tutorial is copyright © 2008 Webucator. The purpose of this website is to help you learn Silverlight on your own and use of the website implies your agreement to our Silverlight Tutorial Terms of Service.