Beginning Silverlight 2.0 Development using Visual Studio 2008

This is my first article in a series focusing on Silverlight 2.0 (beta 2) development using Visual Studio 2008. This article is for beginners who are quite new to Silverlight development and need a practical introduction to developing Silverlight applications using Visual Studio 2008.

Contributed by Jagadish Chaterjee
Rating:

/ 6
October 29, 2008

Rate this Article:
MEH MEH++

SEARCH ASP FREE

Developing your first Silverlight 2 application

Once you have the necessary software installed (as discussed in the previous section), you are ready to develop a new Silverlight 2 application from scratch!

The following are the steps you need to take to get started:

Open Visual Studio 2008
Go to File || New Project
Select "Silverlight" for the “Project Type,” “Silverlight Application” for the "Template," “FirstSilverlightApp” for the "Name" and finally click on “OK” (as shown in Fig 01).

You will be provided with the “Add Silverlight Application” dialog.
Select “Web Application Project” for the "Project Type," “FirstSilverlightAppWeb” for the "Name" and finally click on “OK” (as shown in Fig 02).

Once the solution gets created, you should see a “Solution Explorer” similar to the following (Fig 03).

If you observe the “Solution explorer,” you will find two projects. One is the Silverlight application itself and the other is simply a web application which is used to render and test the Silverlight application developed.

Within the web application project, you should be able to find the folder name “ClientBin.” This mainly contains our Silverlight application in a compiled zip format file named “.xap” (pronounced “zap” file). This gets automatically populated (at run time) based on the configuration as shown below (which is the default; see Fig 04 and Fig 05):

Coding your first Silverlight 2 application

This continues the previous section. In the previous section, we created a new Silverlight application. In this section, we will develop some code and execute the application.

The first step is to create the XAML markup, which simply contains a button and a textbox. Open Page.xaml (available in FirstSilverlightApp) and modify the existing markup so that it looks like the following:

<UserControl x:Class="TestSilverlight.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

</Canvas>

</UserControl>

Open the code behind (Page.xaml.vb) and modify it so that it matches the following:

Partial Public Class Page

Inherits UserControl

Public Sub New()

InitializeComponent()

End Sub

Private Sub btnShow_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

Me.txtFirst.Text = "Hello world"

End Sub

End Class

After completing all of the above steps, execute the application and test the button. It should look like the following (Fig 06):

You can also modify the properties of a control dynamically. This is explained in the next section.

Explaining the code

Let us try to understand the previously tested project. If you open Page.xaml, you should see a “Canvas” object as follows:

</Canvas>

Canvas is simply a layout control. A layout control acts as a container to hold a few more child controls along with size and positioning. There exist a few more layout controls in Silverlight like Grid, StackPanel etc. I will cover those in my upcoming articles.

The Button control gets created using the following markup:

The name of the button is defined by using the “x:Name” attribute. Its positioning is currently defined with respect to its container (Canvas). It is currently associated with a click event handler named “btnShow_Click.”

The Textbox control gets created using the following markup:

This is also very similar to the previous Button control except that it is defined with its own background color and name. As we currently don’t need to handle any event with respect to this control, we simply don’t mention any of its events.

When the button is hit, it executes the following code:

Private Sub btnShow_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

Me.txtFirst.Text = "Hello world"

End Sub

The above code is quite clear. It simply assigns the message “Hello world” to the text box named “txtFirst.”

You can also dynamically modify the properties of a control dynamically as shown below:

Private Sub btnShow_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

Me.txtFirst.Background = New SolidColorBrush(Colors.Blue)

Me.txtFirst.Foreground = New SolidColorBrush(Colors.Yellow)

Me.txtFirst.Text = "Hello world"

End Sub

Once you execute the above, you should have the following output (Fig 07):

Basic Data Binding in Silverlight 2.0

Let us now deal with data binding using Silverlight 2.0. Create a new Silverlight solution and add a new class (to Silverlight project) as follows:

Public Class Emp

Private _Empno As String

Public Property Empno() As String

Get

Return _Empno

End Get

Set(ByVal value As String)

_Empno = value

End Set

End Property

Private _Ename As String

Public Property Ename() As String

Get

Return _Ename

End Get

Set(ByVal value As String)

_Ename = value

End Set

End Property

End Class

Modify Page.xaml to look as follows:

<UserControl x:Class="TestSilverlight.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

</Canvas>

</UserControl>

Modify Page.xaml.vb to look as follows:

Partial Public Class Page

Inherits UserControl

Public Sub New()

InitializeComponent()

End Sub

Private Sub btnBind_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

Dim objEmp As New Emp With {.Empno = "1001", .Ename = "Jag"}

Me.txtEmpno.DataContext = objEmp

Me.txtEname.DataContext = objEmp

End Sub

End Class

Once you execute the above, you should have output as shown below (Fig 08):

The next section gives you an understanding of the code above.

Basic Data Binding in Silverlight 2.0: explanation

Basically, Silverlight applications execute and run on the client side (browser). No code is executed at the web server level. If Silverlight applications were executed at the server level, we'd simply have another ASP.NET!

As Silverlight applications execute at the browser level, we are left with no way to communicate with databases directly. So, we will not be able to bind to databases directly. The best options for getting the data from databases are through either web services or WCF (Windows Communication Foundation) services.

Web Services or WCF components serialize objects (data) and throw them to browser. Once the browser receives them, Silverlight can automatically pick them up and bind the same to Silverlight controls. That is the reason we will be working and binding objects to controls for all kinds of Silverlight applications.

In the previous section, we defined a simple class as follows:

Public Class Emp

Private _Empno As String

Public Property Empno() As String

Get

Return _Empno

End Get

Set(ByVal value As String)

_Empno = value

End Set

End Property

Private _Ename As String

Public Property Ename() As String

Get

Return _Ename

End Get

Set(ByVal value As String)

_Ename = value

End Set

End Property

End Class

The above class simply encapsulates employee number and employee name information. Once the class is defined, we need to instantiate and bind it to Silverlight controls. Currently, to make this article simple, I instantiated the above class with the following statement (along with some sample data):

Dim objEmp As New Emp With {.Empno = "1001", .Ename = "Jag"}

The binding in between the instantiated object and text boxes is made possible using the “Datacontext” property of the controls themselves:

Me.txtEmpno.DataContext = objEmp

Me.txtEname.DataContext = objEmp

We are assigning the same object to both text boxes. But the data gets displayed differently in each of the text boxes. The following declarations made it happen:

The most important attribute on which to concentrate is the “Text” property of TextBox. You can observe that the binding specification is provided with the keyword “Binding” together with the property (of Emp object) to which it needs to bind. It is important to make sure that this information is embedded in braces.

In my upcoming articles, we will see more and more examples of Silverlight 2.0 development. I hope you enjoyed the article and any suggestions, bugs, errors, enhancements etc. are highly appreciated at http://jagchat.spaces.live.com