WPF/Silverlight Insiders

This article is written by Braulio Diez Botella (Silverlight MVP) and Michael Sync (Silverlight MVP)

This is the first chapter of  “Silverlight Tutorials for Beginners” series. This chapter will give you the overview of Silverlight and some basic information that will help you to get started with Silverlight.

Contents

• What is Silverlight?
• Why Silverlight?
• Installing Silverlight 3
• Silverlight 3 – Hello World
• History of Silverlight
• Conclusion
• References

What is Silverlight?

Silverlight is a cross-platform web presentation technology for building Rich Internet Business or Media Applications that runs on various platforms (e.g. Windows, Linux, Mac ) and devices (e.g. Windows Mobile, Nokia S60). It’s also a subset of Windows Presentation Framework (WPF) so if you are already familiar with WPF then it’s very easy for you to learn Silverlight. You can imagine that Silverlight is something similar to Flash. Flash is mainly being used for Media-related applications such as video and online gaming but you can use Silverlight for both Line-of-Business Applications and Media related applications.

Why Silverlight?

Nowdays there are many web and RIA technologies available (ASP .net, PHP, AJAX ASP .net, Flash, Flex, …), Why should we bother about a new kid in town? If we compare desktop development with web development, we find that the second one has evolved rapidly: some years ago users were used to fill plain forms with limited functionality, nowdays they are requesting web app’s with a similar level of usability than a Win Forms / WPF application, altough this goal can be achieved with current technologies we found several challenges and limitations:

• HTML is a technology that has grown organically, the basis of this technology are not targeted for the current expectations, the community has been asking for enhancements and they have been put on top of the existing basement.
• Javascript is as well an outdated language, originally targeted to run on any old cheap computer, not compiled, not fully object oriented, and each browser has it owns implementation.
• Developing a web project means developing on different technologies and languages, e.g.: server side C# + .net framework, client side HTML + javascript.
• Implementing a site using partial rendering (UpdatePanel) it’s a very limited way to implement AJAX on your application and can lead you to serious performance issues.
• Implementing a site using a pure AJAX approach (e.g. script service) can become a complex task, too much Javascript, prone to errors and hard to maintain.
• Unlike  other RIA technologies, Silverlight offers a specialized IDE for developers (Visual Studio) and a specialized IDE for UI Designers (Expression Blend). It’s also based on solid and mature programming languages (C#, VB .net, …)

What can we expect from Silverlight, does it break these limitations ? Let’s enumerate some of the strengths of this new technology:

Technically Speaking

• XAML modern markup declarative language (solid foundation).
• Enables you to build real OOP code on the client side.
• The code is compiled.
• Less browser compatibility issues (same plugin for different browsers).
• You get the benefit o having the .net framework available on the client side.
• It contains Powerful components and user controls.
• you can use same technology / languages on the client and server side (e.g. code your full app on C#).
• Familiar IDE (Visual Studio).
• Fully integration with designers and separations of concerns (XAML, Code behind, Declarative Binding).

From the customer perception

• Usability: Break the limitations of HTML, build rich user interface applications, perform communications with the server faster (no more post, direct service communication)
• Maintainability: Same technology used on the server and client side (C# / VB .net … plus .net framework), ability to build a solid pattern on the client side (MVVM, MVP, …) and add automated unit testing.
• Scalability: Silverlight applications run on the client side, that means free resources on the server instances (no more server side script to HTML transformations, post processing, …).
• Availability: Silverlight applications can run as out of browser app’s (no need to rely on the server to launch it) and incorporate mechanisms to detect network current network status (ability to build a “work offline” model).
• Extensibility: Applications can be divided into several XAP and loaded on demand, it’s possible to implement plugin extensions on a given app.
• Security: You can decide whether to use the existing browser security (inherit security from your existing web application) or define your custom security.
• Portability: Silverlight is cross browser (FireFox, Safari, IE), cross Plaftorm (Windows, Mac OS), multi device (Mobile coming soon).

Installing Silverlight

Here is the list of installers that you need to install before start playing with Silverlight ~

• Silverlight 3 Beta Tools for Visual Studio 2008 : This installer is the combination of Silverlight runtime, Silverlight SDK and Visual Studio Template for Visual Studio 2008. If you like to use Visual Studio for developing Silverlight, you must install this installer in your machine. Here are the few things that you should note before installing ~
  • you must have Visual Studio 2008 (any edition) with service pack 1 installed before installing this installer.
  • The prior version of Visual Studio 2008 is not supported.
  • You can’t have multiple versions of Silverlight installed in one machine.
  • You need to have an internet connection to install this installer. Otherwise, extract it by using winrar and install one by one.
  • You need to close Visual Studio and all browsers on your machine.

• Expression Blend 3 Preview : This is an optional installer. You don’t need to install it if you don’t want but Blend can help you to design the look and feel of your application in very easy way. The XAML designer for Silverlight in Visual Studio sucks. You can’t even drag and drop any control on that designer. This is where Blend can come in and help you in designing the UI.

Yes. You can start installing them now. and come back here when you have finished installing. Note that there are other useful tools (Silverlight Toolkit,  RIA Services, Deep Zoom Composer, Microsoft Web Platform Installer and etc) that you can download and install but we will probably install later since you don’t need them now.

Important Notes

Okay. You are back now? How was the installation? Please leave the comment in this post or ask there if you have any problem in installation. As of now, I’ll just hope that you have installed Silverlight 3 Tools successfully. Let’s continue…

There are three important things that you have to keep in mind when you are working on Silverlight.

• Desktop CLR Vs Silverlight CLR : The first thing that you need to know is that .NET CLR and Slverlight CLR are totally different. The assembly that you compile with Silverlight CLR won’t be compatible with .NET CLR.

• Re-using your .NET Class Library in Silverlight: You can’t reference a .NET assembly in Silverlight. Remember what I just told you? .NET CLR and Silverlight CLR are different so the binary are not compatible between them. That’s why you can’t add the .NET assembly as a reference in Silverlight.If you like to re-use your .NET class library in Silverlight, you will have to port it to Silverlight (like I did for Unity Framework before Microsoft release Unity 1.2 that supports Silverlight). How can we port .NET Library to Silverlight? it’s very simple. First, you need to create Silverlight project in Visual Studio. And, copy some or all of your files from .NET project to Silverlight project. Then, fix the error and find the workaround for those codes that are not supported in Silverlight.As .NET Framework Class Library for Silverlight are very small compared to .NET Framework Class Library (desktop version), there are a lot of classes, properties, methods, events and etc which are missing in Silverlight. But normally, there are some ways to workaround to get the same functionalities in Silverlight. You can take a look at my Array Helper class that I created when I was porting Unity Framework.

• Sandbox Security : Silverlight runs in a sandbox so that you won’t be able to access the user’s hard drive (except Isolated Storage), registry and etc regardless of whether your Silverlight application is runing in browser or out of browser. (Don’t worry if you don’t understand what I meant by “Isolated Storage” or “Out-Of-Browser Silverlight Application”. )

Let’s create a “Hello World” program in Silverlight.

Silverlight – Hello World

Open Visual Studio 2008 and click on New Project ( File -> New -> Project) dialog. You will see new project type called “Silverlight” under “Project Type” tree. If you click on that node, you will see four project tamplates for Silverlight as below. I’m not going to tell you about the details of each project template but I promise that I will definitely tell you later. As of now, Let’s choose “Silverlight Application”, give the name of project and specify the path that you want this project to be created.

I will use “SilverlightApplication1″ as name of my project and will create it under Silverlight Tutorials folder. And then, I will click on “OK” button.

The dialog below will be shown for you to choose how you want to host your Silverlight application. Ticking on the checkbox for “Host the Silverlight application in a new Web Site” means Visual Studio will generate one Silverlight Application project and ASP.NET project that you can use for hosting Silverlight content in ASPX page. We will untrick this checkbox since we don’t need to have any ASP.NET website. You may ask that where we are going to host our Silverlight content if we don’t have any web site. Nothing to worry. Visual Studio will automatically generate a html page with your Silverlight content embedded when you are building the application.

The checkbox under “Options” panel is used for enabling .NET RIA Services that is introduced with Silverlight 3. Using .NET RIA Service is out of scope of this tutorial series. But there will be another tutorial series for .NET RIA Service in this website. (Please wish me to get more time to write for you guys and wish my wife to be happy ). After unticking both checkboxes, the appearnace of dialog will change as below. Please click on “OK” button.

Your brand new Silverlight application will be generated as below in Visual Studio.

Understanding of Silverlight File Structure

If you look at Solution Explorer, you will see the list of files as below. I will brief you a bit about each file.

1. AppManifest.xml : This is the application manifest file that is required to generate the application package. You don’t need to edit anything in this file for the most of times unless you want to add “Offline” support in your project.

2. AssemblyInfo.cs : If you already have some experiences in .NET, I’m sure that you already know what you can do in this file. This is where you can define the information (e.g. version number, description and etc) for your Silverlight assembly.

3. App.xaml and App.xaml.cs

Entry Point : This is an default entry point of your application and it will instantiate the application object. The reason why this file is an default entry point is that the BuildAction of this file is set to “ApplicationDefinition” by default. On the startup of App, you can set the RootVisual to any XAML page (e.g. MainPage() in our case) that you want to show to the user.

For example:

private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new MainPage();
}

Application-wide Resources : You can also define any resouces that you want to be available in your whole application.

4. MainPage.xaml

This is a user control that will be shown on the browser. As you set this page as a RootVisual in App, it will be the first page that you will see on browser at runtime.

Okay. I hope you get some idea about Silverlight default file structure and what you can do with those files. Let’s get back to the “Hello World” sample that we are doing.

Open MainPage.xaml and drag one button from Toolbox to the XMAL file.

and write “Click Me” in the content of that button as below.

<UserControl x:Class="SilverlightApplication1.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
 <Grid x:Name="LayoutRoot">
 <Button Content="Click Me" Click="Button_Click"></Button>
 </Grid>
</UserControl>

After that, we will write a MessageBox in that click event.

private void Button_Click(object sender, RoutedEventArgs e)
{
  MessageBox.Show("Hello World");
}

Now, your application is ready to run. So, press F5 to run the application. Your “Hello World” program will be displayed on your default browser. If you click on “Click Me” button then you will get this message box “Hello World!” as shown in the screenshot below.

Yeahh.. You have successfully created very first Silverlight application.  There are a few more tutorials in this series and I’m sure that you will be able to start working on your own Silverlight once you have finished reading all chapters in this series.

Don’t hesitate to contact us or drop a comment in this post if you have any question or difficulties or feeback or anything.

Hope it helps.

Happy Silverlighting!!

References ~

• Introducing Microsoft Silverlight 1 (should be 1 instead of 1.0. “We are integer, babe!”)
• Silverlight 2
• Silverlight 3

Michael Sync Tutorials