WPF/Silverlight Insiders

This article is written by Einar Ingebrigtsen (Silverlight MVP). It is a part of “Silverlight Basic”, the third chapter of “Silverlight Tutorials for Beginners.”

Download : SpinningCube.zip (12.9 KB)

Silverlight represents a subset of WPF and it’s features, one of the features that aren’t part of the subset is 3D. Silverlight 3 introduces the ability to project any UIElement in 3D by rotating them around the X,Y and Z axises. But geometries that consist on anything else but planes, typically triangles would not perform well using the PlaneProjection. Silverlight has primitives that can be used instead, such as Polygon. The Polygon can have N number of sides, at least 3, which is perfect for representing 3D models.

This tutorial is very basic and does not involve any heavy geometry math. If you want to do more advanced geometry stuff with cameras, texturemapping, lighting and such, Balder could be place to look. Balder is a full 3D engine I started writing back in early 2007 and is opensource, you can find it here.

Getting started

First thing you need to do is to create yourself a Silverlight project and leave all the defaults in.

Rendering container

This sample needs a container to add polygons to. When you first created the project a MainPage.xaml file was added to the project, opening it you’ll see there is a tag at the top. Lets give it a size and a background color:

Now we have a container that we can add polygons to that has a dimension of 640 by 480 pixels and the background is black.

The rendering loop

The first thing we will be needing is a timer that gets called on a regular basis for handling all the calculations and generation of polygons that will be visible on the display. It is very important that this timer is running in the same thread context as the main Silverlight thread. Manipulation of the visual tree is not allowed from other threads. Silverlight has something called the DispatcherTimer that we can use for this. The DispatcherTimer can run with the same framerate as the plugin has been specified to run with, default being 60 frames per second.

In the MainPage.xaml.cs file in your project, we need to add the following code in the constructor, right beneath the InitializeComponent() method call:

In the Tick event we are specifying a method called Render, which will be a method you have to add in the same class that will be called everytime rendering will occur:

A cube

To define our cube we need points in 3D space, these are called Vertices (one vertex, several vertices). We need to add a simple class to represent a vertex. The class represents the original vertex before we have done any calculations on it and also contains the finished calculated vertex ready to be used on our 2D screen.

As you can see, the vertex contains an X,Y and Z representing the coordinate in 3D space. In addition it contains the rotated version and the translated
(2D) version. Now that we have the definition of a vertex, we need the definition of a triangle that hooks itself on 3 vertices, we call these Faces. A face
contains 3 integers representing an index into the array of vertices for the object we are rotating. Add a class called Face and make it look like this:

Next, we need the actual cube and methods for rendering itself. We create a class called Cube. In the Cube class we need to define the vertices that defines the cube. Add the following at the top of the class:

The purpose the constants at the top is to be able to change the size of the cube with ease.
And we need an array of faces that hooks up to these vertices :

Next we need to actually render the cube. The rendering is divided into two processes, one for calculating all the vertices and one for generating the polygons. First we need to define a method for calculating the vertices:

Note that the method takes the rotation around the 3 axises in as parameters, and also something called xoffset and yoffset.

The offsets are used for centering the finished result, which will be shown later in the render method. Now we need a method for generating the polygons:

We now have all the methods we need to finish the rendering. In the Cube class, we expose a public method to tie it all together:

The method takes a panel as the container in which it will render all the polygons to and the rotation around the 3 axises.

The xoffset and yoffset is calculated by taking the containers width and height and divided by 2, which is the center of the container.

All we need now is to go back to our MainPage.xaml.cs file and create our cube and call the rendering method.

Add a private field holding the Cube instance, like this:

In the constructor we can now create the cube:

Then we define some variables that we can manipulate every time we render, these will be used for rotating the cube. In the MainPage class, add the following fields:

Now, we can add a body to the Render method:

That should be just about everything we need to get a spinning cube on the screen.
The result should be something like this:

Conclusion

Silverlight has come a long way since its initial first release in 2007, but still real 3D is missing. In Silverlight 3 there has been done some work by Microsoft on the subject with the introduction of plane projection. For a simple cube like in this tutorial, one would be better off using that technique. But, if you want to represent more advanced geometries, the technique in this tutorial is better. There are some limitations though. Due to the way Silverlight works internally with the main rendering engine and the CLR being separated completely, there are speed limitations to how many polygons it is possible to render. So really complex geometries is something that would not perform well. Another issue is texturemapping. Silverlight does not give you any ability to represent the U,V coordinates within the texture for every point in a polygon. It is possible though to get this working by manipulating the matrix of the imagebrush specified, but again, performance will be impacted. In the Balder engine, we have overcome these limitations by creating our own drawing routines, not using any Silverlight primitives at all. Since the CLR is quite speedy, this enables us to draw quite complex objects.

Tutorials

This article is written by Emil Stoychev (Silverlight MVP).This is the fourth chapter of Silverlight Tutorials for Beginners series.

Data Binding is simple, yet powerful way to connect (bind) your business model and user interface (UI). When the data in your business model changes the UI reflects changes automatically and vice versa (when a user changes the data in the UI the data in the business model is changed).

Binding establishes a connection between two dependant items. Basically, it is an automatic way of transferring information from one item to another.

Content

• Data Context, Dependency Property, Dependency Object
• Types of Binding
• Converters
• Validation in Binding
• Consuming Services
• Sample

Data Context, Dependency Property, Dependency Object

Data Context

In Data Binding we have two objects: target – the UI element and source – the data (business model, entity, etc). While the source property can be a normal .NET property, the target property must be a DependencyProperty. More on that later in the tutorial.

The DataContext is actually the source of data bound to the target. The default source of a binding is the data context. DataContext is inherited to child elements and thus ideal for scenarios where you want to bind multiple elements to a single data source. DataContext is a property of FrameworkElement. Let’s see this in an example:

…

<local:ContactCard  x:Name="JohnsBusinessCard"
                            FullName="John Smith"
                            Position="Silverlight Developer"
                            Email="john@smith.com" />

…

<StackPanel DataContext="{StaticResource JohnsBusinessCard}">
        <TextBlock Text="{Binding FullName}"
                   FontWeight="Bold" />
        <TextBlock Text="{Binding Position}" />
        <TextBlock Text="{Binding Email}" />
    </StackPanel>

ContactCard is a custom defined class with three properties – FullName, Position and Email.

All bindings set to the TextBlock elements inside the StackPanel have source the DataContext of the StackPanel – {StaticResource JohnsBusinessCard} in this case.

In case of items control we can think of the DataContext as the particular data item that we bind to at run time. So let’s say we have a list of ContactCard objects set as a DataContext to an ItemsControl. The data context of each of the items in the ItemsControl is the corresponding list element in the list (set as DataContext).

Dependency Property and Dependency Object

DependencyObject and DependencyProperty are fundamental concepts in Silverlight/WPF that provide the base for the underlying property system.

< to be continued… >

Types of Binding

With each binding you can set Mode which defines the direction of the data flow as well as when the binding occurs. There are three available binding modes in Silverlight:

1. OneTime – set the target and forget the binding. This mode is useful when you display data and you know that this data will never change or you don’t need to change it. Changes in the source are not propagated to the target.
2. OneWay – set the target and update it every time the source changes. This is the default mode. Use it in cases where the user can’t change the target, but you still want to keep the target updated once the source is changed from somewhere (say the code).
3. TwoWay – keep both the target and the source updated. Once the source is changed its new value is propagated to the target and vice versa. This is useful in cases where the user can change the target and you want the changes to be written back to the source.

Lets take a look at the syntax:

<TextBlock Text="{Binding Email, Mode=TwoWay}" /> 

Depending on your case you can select one of the three binding modes. To choose which one is most appropriate for your case you can try to answer yourself the following questions in this order:

- Do I need to update the target when the source change? (yes – OneWay or TwoWay; no – OneTime)

- Do I need to reflect the changes done on the target to the source? (yes – TwoWay; no – OneWay)

< continue with INotifyPropertyChanged… >

Converters

A common scenario in data binding is that you need to format the data displayed to the user. Intuitive examples for that are formatting of DateTime and number values. In Silverlight and WPF this is achieved by applying a ValueConverter (or just Converter) to the data you are binding to.

Converters are classes that derive from the IValueConverter interface. This interface have two methods that should be implemented – Convert and ConvertBack. The Convert method is used when the data flows from the source to the target, while the ConvertBack is used when the data flows in the opposite direction – from the target to the source. In case your binding uses OneTime or OneWay mode you can go only with implementing the Convert method, but that is not considered a good practice as the converters are reusable chunks of code and you never know who and in what situation will use it.

Lets see what a converter look like:

public class DateTimeConverter : IValueConverter
{
    public object Convert( object value, Type targetType, object parameter, System.Globalization.CultureInfo culture )
    {
        DateTime dt = (DateTime)value;
        return dt.ToString( "dd MMM, yyyy", culture );
    }
    public object ConvertBack( object value, Type targetType, object parameter, System.Globalization.CultureInfo culture )
    {
        throw new NotImplementedException();
    }
}

Here only the Convert method is implemented. It is important to note that you should always validate the value parameter as it could not be from the type you expect.

// show the xaml syntax – convert as static resource

This is probably the most simplest converter you can ever write. The make it more flexible you can use a ConverterParameter. In different scenarios you may want to format the DateTime value in different way. The specific format can be passed through the ConverterParameter.

<TextBlock Text="{Binding Birthdate, Converter={StaticResource DateTimeConverter}, ConverterParameter=YYYY}" /> 

Validation in Binding

; content

Consuming Services

; content

Sample

; content

Tutorials

This article is written by Alexander Golesh (Silverlight MVP).

This is introduction to Silverlight styling and templating features. This is also the fifth chapter of “Silverlight Tutorials for Beginners” series.

Content

• Styling
• Templating
• Conclusion

Styling

Silverlight controls has default look and feel, which is very close to standard Windows application look and feel.

Style is a mechanism in Silverlight that allows you to encapsulate control property values as reusable resources. This is conceptually similar to CSS with HTML. Style defines control property values as reusable resources.

The same button which was used at figure 1 could have pretty non-standard look-and-feel.

Style also allows you to achieve same look-and-feel for multiple controls of the same type across all the application.

Let’s see how to create the style.
Let’s create a simple button defining Button element in XAML inside the StackPanel:

<Button Content="First Button" Width="100" Height="25"/>

Style defined in “Style” tag in XAML file as a part of some content resources. Placing a style inside a specific XAML page will enable its use in this specific content, while placing it in App.xaml will enable it to be reused across all pages and controls in application. Style also could be placed inside specific panel element, which will allow using this style only to the panel’s child elements. The style defined as a part of the Resources for chosen element.
Sample style definition:

<StackPanel.Resources>
<Style TargetType="Button" x:Key="btnStyle">
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Background" Value="Blue"/>
</Style>
</StackPanel.Resources>

In this case we defined the style as a part of some StackPanel, which will allow using this style only for child’s of this StackPanel. The style has 2 required attributes:

1. TargetType – the Type of the element which allowed using this style. The type itself could specify the base class for the group of elements, for example ButtonBase – specifying it as TargetType enables to use this style for any derived class, like Button, RadioButton, CheckBox, etc.
2. x:Key – the name of the style, which will be used by the elements to access the style.

Style defines the properties of the target element by specifying property name and the desired value in “Setter” element. In our case the style define values of 3 properties for the Button: Width, Height and Background.

Now it is a time to apply this style on our button:

<Button Content="First Button" Width="100" Height="25" Style="{StaticResource btnStyle}"/>

Style applied by specifying “Style” attribute of the desired element. Style (and not only style) specification uses special syntax called Markup Extension. This syntax is merely just a specification of some special command (in opposite of the attribute value, which usually being placed to the attribute) – in our case it is “StaticResource”. To distinguish special syntax from regular value it being placed inside curly braces “{…}”.

In our case StaticResource means that XAML parser should look for the resource named btnStyle and use the value of this resource as the value for the attribute.

Now our button has specified look. We could use this resource as many times as we need inside the scope of our style definition, and all elements with the same style will have same look and feel.

If we will change the definition in the style, all elements with this style applied will get the change:

<Setter Property="Background" Value="Green"/>

Any element could specify any property value at the element definition, and it will override the value given by style (if applied)

<Button Content="First Button" Width="100" Height="25" Style="{StaticResource btnStyle}" Background="Red"/>
<Button Content="Second Button" Width="100" Height="25" Style="{StaticResource btnStyle}"/>
<Button Content="Third Button" Width="100" Height="25" Style="{StaticResource btnStyle}"/>

Style could “derive” from another style by using “BasedOn” attribute.

Let’s see how to define style hierarchy for the buttons, and how it behaves:

<Style x:Key="BaseButtonStyle" TargetType="Button">
<Setter Property="Width" Value="100"/>
 <Setter Property="Height" Value="25"/>
<Setter Property="Margin" Value="5"/>
 </Style>
<Style x:Key="DerivedButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
<Setter Property="Background" Value="Red"/>
 <Setter Property="BorderBrush" Value="Blue"/>
<Setter Property="BorderThickness" Value="3"/>
 </Style> 

<Style x:Key="ExtendedButtonStyle" TargetType="Button" BasedOn="{StaticResource DerivedButtonStyle}">
<Setter Property="ClickMode" Value="Release"/>
<Setter Property="Cursor" Value="Hand"/>
 <Setter Property="FontFamily" Value="Trebuchet MS"/>
 <Setter Property="FontSize" Value="20"/>
 <Setter Property="Height" Value="35"/>
 <Setter Property="Width" Value="150"/>
 <Setter Property="Background" Value="Green"/>
 </Style>

In this sample we created 3 styles for the Button type: ButtonBaseStyle, DerivedButtonStyle and ExtendedButtonStyle.

The DerivedButtonStyle uses BasedOn attribute to derive from ButtonBaseStyle. The BasedOn defined by using same Markup Extension syntax to define the parent style BasedOn=”{StaticResource BaseButtonStyle}”. The DerivedButtonStyle got all the properties defined in base style and adds 3 new properties. The ExtendedButtonStyle uses BasedOn attribute to derive from DerivedButtonStyle. It gets all the properties defined in DerivedButtonStyle and in ButtonBaseStyle, adds new property definitions and also overrides some of properties defined in base classes: Width, Height and Background.

Applied to the button will give use following look and feel:

The existing style could be applied not only by using Markup Extension in XAML, but also form code behind:

Style style = this.Resources["BaseButtonStyle"] as Style;

if (null != style)

btnSimple.Style = style;

The style itself also could be defined in code behind.

Let’s change the style of the button on the click event. The button definition:

<Button Content="Set Style" Click="Button_Click" x:Name="btnNewButton" Width="100"/>

The initial look:

The event handler code:

private void Button_Click(object sender, RoutedEventArgs e)
{
Style myStyle = new Style();
myStyle.TargetType = typeof(Button);

Setter setter = new Setter();
setter.Property = Button.BackgroundProperty;
setter.Value = new SolidColorBrush(Colors.Yellow);

myStyle.Setters.Add(setter);

btnNewButton.Style = myStyle;
}

And after the code being executed the button gets following look:

The styling is powerful feature which allows us to configure basic set of properties for the element. But how it helps us to create the button which looks like this:

The colors and fonts – we already know. But what about the shape of the button?

To completely change the UI for the element we have to use Template feature in Silverlight.

Templating

Template allows to completely customize/change the look and feel of the controls. It allows developers and designers to sculpt the UI of controls in both subtle and dramatic ways, and enables a tremendous amount of flexibility to create exactly the user experience desired.

Template could be created as a standalone resource (with same scope definitions like the styles) or templates could be created as a part of style for the control.
The styles are the recommended location to create templates.

Templates created by defining “ControlTemplate” element with XAML. Each template must define its “TargetType” (exactly like styles). In case of template definition as a standalone resource (not within a style) it also should have key defined within “x:Key” property.

Let’s define simple template for a button:

<ControlTemplate TargetType="Button" x:Key="roundButtonTemplate">
<Grid>
<Ellipse Width="200" Height="200">
<Ellipse.Fill>
<RadialGradientBrush
GradientOrigin="0.2,0.2">
<GradientStop Offset="0.2"
Color="White"/>
<GradientStop Offset="1"
Color="Red"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock Text="Close" FontSize="28"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>

To apply the template on button use markup extension syntax (exactly like we did for styles):

<Button Content="Hide Me" Width="100" Height="50" FontSize="15" Template="{StaticResource roundButtonTemplate}"/>

Well, the button is not exactly like planned – the text is “Close” (as defined in template) and not “Hide Me” (as defined in the control itself), the size of ellipse is also seems to be wrong. This behavior is because we didn’t specify that the values for those attributes should be taken from the actual control the style being applied on.
In case of temple we could/should specify, that values for the attributes should be taken from the actual control. To do it we will use additional markup extension – “TemplateBinding”. Also, in a case of button (which is a Content Control), the text should be displayed as a content and not as a TextBlock. Let’s rewrite the ControlTemplate.

</pre>

<ControlTemplate TargetType="Button"
x:Key="fixedRoundButtonTemplate">
<Grid>
<Ellipse Width="{TemplateBinding Width}"
 Height="{TemplateBinding Height}">
<Ellipse.Fill>
<RadialGradientBrush
GradientOrigin="0.2,0.2">
<GradientStop Offset="0.2"
 Color="White"/>
<GradientStop Offset="1"
 Color="Green"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>

When applied to the button

<Button Content="Exit" Width="100" Height="50" FontSize="15" Template="{StaticResource fixedRoundButtonTemplate}"/>

The button looks like expected.

The ControlTemplate definition as a part of a style should be in a value of Template property.

Sample (partial) style definition:

<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="Padding" Value="4" />
<Setter Property="FontFamily" Value="Trebuchet MS"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
...

Then, applying the “buttonStyle” on the button will change the Button’s properties and the button template according to defined in style.
When utilizing Control Templates, the templated control still has all the functionality of the original control (in the case of button it is click, mouse hover, etc.)

Conclusion

The styling and templating are a very powerful feature, which allows to completely customize standard look and feel for any custom control.

Tutorials

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

Tutorials

This is our first series of tutorials for those who are new to Silverlight. I would like to thank Braulio Diez Botella,  Alexander Golesh,  Emil Stoychev,  Einar Ingebrigtsen and Daron Yöndem for contributing their articles for this series. Special thanks to Jocelyn Mae Villaraza from Microsoft Singapore for reviewing our articles.

1. Introduction of Silverlight

- By Braulio Diez Botella and Michael Sync

URL : http://wsinsiders.com/…-introduction-of-silverlight/

• Introduction of Silverlight
• What is Silverlight?
• Why Silverlight?
• Installing Silverlight
• Silverlight  – Hello World
• Reference

2. XAML Basic

- Michael Sync

URL : Coming Soon.

• XAML Basic
• What is XAML?
• Basic Syntax
• XAML vs Code
• Instantiating object in XAML
• Namespace
• Resources

3. Silverlight Basic

- Daron Yondem, Einar Ingebrigtsen

URL : http://wsinsiders.com/…-spinningcube/

Note: Daron’s tutorial will be published soon.

• Silverlight Basic
• Layout
• Controls
• Events
• HTML Bridges
• Media – Audio/Video/Graphics
• 3D object
• Sample

4. Data Binding

- Emil Stoychev

URL : http://wsinsiders.com/…-data-binding/

Note: This article has not finished yet. The update will be published very soon. Stay turned.

• Data-Binding
• Data Context and Dependency Property, Dependency Object
• Types of Binding
• Converter
• Validation in Binding
• Consuming Services
• Sample

5. Styles/Templates

- Alexander Golesh

URL : http://wsinsiders.com/…-styling-and-templating/

• Styles
• Basic understanding about Style
• Control Template and Data Template
• Based On
• Style in Resource File/ Merging/ Theme
• Sample

We are planning to write more tutorials for our Silverlight community. If you like to see any specific topic or you like to participate in writing tutorials, please let me know. I can be reached at mchlsync AT gmail DOT com. Thanks.

Tutorials