Although, this tutorial is called “Silverlight 2.0 In Examples”, this introduction will not have many examples. The main purpose of this article is to describe what Silverlight is, where it can be used, its advantages and shortcomings.
What is Silverlight
There is a difference, however, between Silverlight and Html. In order for Silverlight to work in your browser you need to install the Silverlight framework from Microsoft. Silverlight framework is a small package (around 5Mb) which can be downloaded and installed pretty fast. In that sense Silverlight is closer to Adobe Flash which requires Flash framework installed, or, for that matter, to Java applets, which require Java Virtual Machine.
Silverlight can run on different platforms within different browsers. It runs on Windows within IE and Firefox. It also runs on Mac under Safari and Firefox. This should cover most of the possible clients. For the full list of platforms, take a look at the Silverlight article on Wiki. Microsoft also promises to expand the list of platforms and browsers.
Silverlight 1.0 is an old version that will not be discussed here. It only allows programming in JScript language.
Instead I will be concentrating on Silverlight 2.0 (still in Beta – according to some unconfirmed internet rumors it will be released at the PDC conference at the end of October). In spite of still being in beta, it was used by the major networks for the coverage of 2008 Olympics and Democratic convention.
Silverlight 2.0 allows creating applications in many different programming languages. Here, however, I’ll be concentrating on creating Silverlight 2.0 applications in C#.
C# or other programming languages can be used to program the business logic of the Silverlight application. The presentation and static content are usually created in XAML (though it is possible to create the whole application in C#).
XAML is an XML based language which (very successfully from my point of view) uses XML hierarchical structure to reflect the containment hierarchy of objects (primarily GUI objects). It will be discussed in more detail later.
Silverlight applications are usually embedded into HTML or ASP pages. They can be initialized by the user clicking on a certain HTML hyperlink or a button.
Why I Love Silverlight
- Using Silverlight, one can achieve clean separation between business objects and the way they are displayed. That means that the underlying business logic of an application does not have to be polluted with the visual presentation details. Instead XAML files contain DataTemplates that know how to present the data provided by the business logic. These DataTemplates are mapped to the underlying business objects with the help of a technique called binding.
- Silverlight controls can be developed lookless (without the visual representation). E.g. a button can be simplified to a control that only has “Click” event. The way the actual button looks and behaves when clicked can be provided by the Control Templates and Styles. This again helps to separate the underlying logic from the visual representation. It also allows having multiple ways in which the same controls are shown without changing the underlying logic.
- Silverlight has a powerful set of geometric tools that allow creation of various 2-D drawings. It also has a powerful set of geometric transforms which are easy to user and which can be applied to any Silverlight visual objects.
- Silverlight has a rich set of built-in controls, even though, at this point some important controls are missing. WrapPanel, ComboBox, TreeView, ContextMenu are just several examples of missing controls. However, there are some publicly available open source implementations of those controls.
- Silverlight includes powerful animation functionality.
- On a personal note, I came to Silverlight from the the WPF (Windows Presentation Foundation). Silverlight, from the developer’s point of view is almost a subset of WPF. So, WPF developers should not have any problem mastering Silverlight.
Because of the clean separation between the business logic and the presentation, I think Silverlight will take a much more prominent role in business application development than Adobe Flash.
The best on-line silverlight resource is located at siverlight.net. From there you can get to Jesse Liberty blog. Jesse is a renowned author whose latest passion became Silverlight. There are other valuable places on the internet including codeproject.com.
Finally an Example: “Hello World” Application in Silverlight
To create a Silverlight application, open VS 2008, go to File menu and choose New->Project. On the left side panel choose Visual C#->Silverlight to be the Project Type. Choose “Silverlight Application” on the right hand side. Also choose the path where you want your solution to reside and choose the name of the solution (and the project) to be “HelloWorld”. At the next screen choose “Dynamically generate an HTML test page to host Silverlight within this project” for simplicity.
In your VS solution window you will see that Visual Studio generated 4 files containing C# and XAML code: App.xaml, App.xaml.cs, Page.xaml, Page.xaml.cs. You do not have to pay much attention to the App.xaml and App.xaml.cs files. They are only used to initialize the Silverlight application. Most times you won’t have to touch them. The really interesting files are Page.xaml and Page.xaml.cs.
Here is the content of Page.xaml file:
<Grid x:Name=”LayoutRoot” Background=”White”>
Let us investigate its contents line by line.
UserControl is the superclass from which our Page control is derived.
HelloWorld.Page is the namespace and the class name of our control.
Two lines that start with xmlns should be present in almost every XAML file. They declare the default and “x:” namespaces, making available much of Silverlight functionality to be used within the file.
Width and Height properties specify Width and Height of our Page control.
Finally Grid is a panel. Panels are controls in charge of positioning other controls.
To Display “Hello World” within the Silverlight application all we need to do is to add the following line to the Grid:
<TextBlock Text=”Hello World”/>
Eventually we never touched Page.xaml.cs file. That is because we did not want our application to have any behavior: all we wanted was to display a static “Hello World” message.
The code for this example can be found at helloworldzip.doc. This is a simple .zip file. Remove “.doc” extension and change the name of the file to HelloWorld.zip.