Silverlight 3 and ASP.NET 3.5

Before you start to thinking about your new website in Silverlight - it's good to remember that Silverlight application runs on the Client. It means your compiled ".xap" file is copied to the client prior to its execution. The ".xap" file contains all your Silverlight application. It's the big advantage because this approach dramatically reduces loading and/or rendering and there are minimal or none server calls. If you'll need to communicate with the server from your Silverlight application you have to use a webservice - Silverlight enabled WCF Service.

Silverlight 3 and Visual Studio 2008

First of all, you'll need to download and install Silverlight runtime as well as Silverlight SDK. The first mentioned is required to be able to see your output (your Silverlight application) on the browser and the second one is neccessary for developing.

You can get the latest stuffs from here:
http://silverlight.net/GetStarted/

I recommend to install SDK2 and SDK3 too, the reason is that SDK3 does not contain required library "System.Web.Silverlight.dll".
You should Add Reference to this library to be able use the Silverlight namespace (<asp:silverlight>)

To start build your Silverlight application, create a new "Silverlight Application" project. According to selected option the VS creates several files for you:

in Silverlight folder:

• App.xaml - it's the starting main application file. It contains data and logic for your entire application, application-scope resources. This file is executed as first when your project starts. You can direct all other *.xaml files from here.

• MainPage.xaml - main page, e.g. one of your control. The default behaviour is that this page is loaded from App.xaml.

In Silverlight usually each control resists in one xaml file or you can create separate xaml file for each site of your web. Please remember there's no Post-Back, so your website can be just one file, controls are refreshed via UpdateManager.

in your Silverlight.Web folder:

• Default.aspx - your aspx startup page

• SilverlightTestPage.aspx, SilverlightTestPage.html - these are test pages for your Silverlight application. You can open these files on your browser to test your Silverlight project.

That's enough for now and you can start coding. Let's say, your web application will start with the Default.aspx site, so setup this page in VS as "Set as Start Page".

Modify your Default.aspx to accept <asp:silverlight> namespace, add this line right below the Page directive:
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>

Right now, you can use <asp:silverlight> namespace in the code in <form> section - don't forget to add <asp:scriptmanager>, e.g.:

<asp:scriptmanager id="ScriptManager1" runat="server">
<asp:silverlight id="Silverlight1" runat="server" source="~/ClientBin/Silverlight.xap">

The Source parameter contains location to compiled xap application. (This xap file is about to be created when you build your Silverlight application).

Please note you can use CssClass or style parameters in the <asp:silverlight> namespace to position your silverlight control. It means you can create mixed content page, e.g. page can be aspx and your ads can be Silverlight, however the Silverlight has power to build the entire web. In case you'll use whole browser window to display your Silverlight application you can add the following style: style="width:100%, height:100%".
Of course, you can position your Silverlight controls in xaml file(s).

Suppose, you're building an CRM application. When you start your web application a login form should appear.

Example of the login.xaml:

<UserControl xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input" x:Class="Silverlight.login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas>
<Grid x:Name="loginGrid" Width="238" Height="156" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid Background="LightGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Text="L O G I N" Grid.ColumnSpan="2" HorizontalAlignment="Center"/>
<TextBlock Text="User Name" Width="100" HorizontalAlignment="Right" Height="20" Grid.Row="1" Grid.Column="0"/>
<TextBox x:Name="UserName" MaxLength="50" Width="100" Height="25" Grid.Row="1" Grid.Column="1"/>
<TextBlock Text="Password" Width="100" HorizontalAlignment="Right" Height="20" Grid.Row="2" Grid.Column="0"/>
<PasswordBox x:Name="Password" MaxLength="20" Width="100" Height="25" Grid.Row="2" Grid.Column="1"/>
<Button x:Name="bntLogin" Width="80" Height="25" Content="Login" Click="bntLogin_Click" Grid.Row="3" Grid.Column="1"/>
</Grid>
</Border>
</Grid>
</Canvas>
</UserControl>

This form should be positioned at the centre of the user's browser area. This task can be accomplished very easily:

1. you need to get browser's display area dimensions
2. you need to write a code that will centre the login form

First of all, Silverlight support functions to access Browser and HTML page properties via System.Windows.Browser namespace.

To get browser's dimensions:
Dim clientWidth As Double = Application.Current.Host.Content.ActualWidth
Dim clientHeight As Double = Application.Current.Host.Content.ActualHeight

Retrieve control's dimensions:
Dim cntWidth As Double = loginGrid.Width
Dim cntHeight As Double = loginGrid.Height

Calculate control's new margin position:
loginGrid,Margin = New Thickness((clientWidth - cntWidth) / 2, (clientHeight - cntHeight) / 2, 0, 0)

So, the code for login.xaml.vb looks like:

Imports System.Windows.Browser

Public Sub New()
 InitializeComponent()
 'Add event handler to form resize
 AddHandler Application.Current.Host.Content.Resized, AddressOf centerForm
End Sub

Private Sub login_Loaded(ByVal sender As Object, _
            ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
 Call centerForm()
End Sub

Private Sub centerForm()
  Dim clientWidth As Double = Application.Current.Host.Content.ActualWidth
  Dim clientHeight As Double = Application.Current.Host.Content.ActualHeight
  Dim cntWidth As Double = loginGrid.Width
  Dim cntHeight As Double = loginGrid.Height
 loginGrid.Margin = New Thickness((clientWidth - cntWidth) / 2, _
                                      (clientHeight - cntHeight) / 2, 0, 0)
End Sub

There are some other important things to think about before you start to build your Silverlight application - see next posts.