Writing First Silverlight 2.0 Program using Visual Studio 2008

 

In this first lab we will create Silverlight 2.0 Application using Visual Studio 2008. Below are the steps –:

1) Create a new project using Visual Studio 2008 as shown below-

2) Give a Name to your Silverlight Project FirstSLApplication and click OK.

3) From the dialog box shown make a choice of Web Site and click OK as shown below-

4) This will create one solution which contains Silverlight Application and web site which is same as Simple ASP.NET 2.0 web site with one significant change that is it has one very special folder – ClientBin. This folder contains .XAP file. Which is a compressed format of Silverlight 2.0 application which will get deployed at client side.

5) Compile your Silverlight application and see that your ClientBin Folder contains .XAP file.

6) You can see what is there inside .XAP. Open ClientBin folder in windows explorer and rename the file extension from .XAP to .Zip. Extract that .zip file and observe it. It contains a .dll file by the name of your silverlight application and AppMenifest.xaml.

7) Now as you have seed what is there inside .XAP, let’s go and start writing our first Program.

8) In a silverlight Project, you will find Page.xaml and the code behind Page.xaml.cs/.vb file. Page.xaml will hold the design part of Silverlight application and Page.xaml.cs/.vb will contain the application logic. For example Button Click event, Page Load event.

9) Type the below code in Page.xaml-

<UserControl x:Class="FirstSLApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Black">
        <TextBlock FontSize="12" Foreground="White" x:Name="txtName" Text="Show Date and Time"/>
        <Button x:Name="btnShowDateTime" Content="Show Date and Time" Height="50" Width="200" Click="btnShowDateTime_Click"/>
        
    </Grid>
</UserControl>

9) Now go to the code behind of Page.xaml.cs and write bellow code-

private void btnShowDateTime_Click(object sender, RoutedEventArgs e)
 {
      txtName.Text = "Current Date and Time - " + DateTime.Now.ToString();
 }

10) Once you are done, hit F5 to test the First application of Silverlight 2.0.

Now as you have completed writing the first Silverlight Application, let’s use the tool which is especially dedicated to Designers which is Microsoft Expression Blend 2.0 and start with our second Lab – “Using Microsoft Expression Blend 2.0 to Design Silverlight 2.0 applications.”