Mastering LOB Development for Silverlight 5: A Case Study in Action

Microsoft has published a plugin called Silverlight (the word plugin reminds us of Flash, one of the most accepted plugin-based technologies) which allows us to encode with sturdy, compiled languages (such as C# and VB.NET). This plugin incorporates a lite version, that is the .NET Framework, which offers us the possibility to take advantage of everything offered at the client side while implementing a new markup language called XAML. The advantages of using Silverlight are as follows:

In addition, Silverlight is multi-platform (for example, Windows or Mac) and multi-device (computers, mobile devices with Symbian or WP7 support, for instance, among others).

In this book, we are going to deal with Silverlight 5. The tool that Microsoft recommends for development is Visual Studio 2010. Therefore, we will have to install the following software:

All of these individual links are available at http://www.silverlight.NET/getstarted/.

Silverlight is a plugin installed in web browsers in a quick and clean way similar to Flash. That is, Flash is in a controlled environment, and applications run under a sandbox environment.

As for the architecture, if we compare it to a standard web application, we can substitute XAML for HTML, C# or VB.NET for JavaScript, and so on. We can also make use of a reduced version of the.NET Framework as shown in the following figure:

The plugin is about 4 MB in size and does not depend on the desktop version of Microsoft .NET Framework.

All this is fine but there a few questions to be answered such as how is the Silverlight application installed on a server? How is it executed on a client machine? Let's see how it works:

Application execution takes place in a controlled sandbox environment, so a malicious developer cannot format the client's HDD (in some cases, user confirmation is required to interact with the hardware, otherwise interaction is simply denied to the application).

To get a better idea of how it works, let's compare an HTML web application with a Silverlight one:

It is highly recommended that you have a good knowledge of the XAML markup language and some experience practicing it. Nevertheless, if you intend to make a rapid prototype or just need to begin developing immediately, you can use the drag-and-drop controls from the toolbar directly in to the form (as in a WinForms application).

You can also edit the features of a control by accessing the Properties window as shown in the following screenshot:

In order to achieve a higher control over the windows layout (with the aim to, for example, achieve an optimal disposition of the controls in different resolutions), we suggest learning the XAML markup language or using Expression Blend, which is a tool for designers (and developers).

In the following example, we will allow the user to change the message Hello World! to one of their choice. Starting from the previous example, we will follow the given steps:

Now that we have taken our first steps with Silverlight, let's have a quick introduction to some basic concepts in XAML.

When you work with HTML, you build the basic visual structure of a page by using tables or divs (in more modern browsers, you can use a canvas as well). In Silverlight 5 we have three basic elements: Canvas, StackPanel, and Grid.

Canvas

This layout control permits us to place Child controls in coordinates relative to the canvas parent (taking into account that the upper-left corner of the canvas is the (0,0) coordinate) X, Y, Z (Z for the ZIndex). It is perfect for the implementation of drawing applications or those devoted to diagram management.

In the following code you can see an example where a rectangle and an ellipse are drawn:

<Canvas>
  <Rectangle 
    Canvas.Top="25" Canvas.Left="50" 
    Fill="Blue" Width="70" 
    Height="80" StrokeThickness="3" Stroke="Black" />
  <Ellipse
    Canvas.Top="50" Canvas.Left="80"
    Fill="Yellow" Width="120"
    Height="80" StrokeThickness="3" Stroke="Black"
  />
</Canvas>

Copy

Canvas.Top and Canvas.Left are attached properties. Such properties allow a child element to store a value associated with a property defined on an ancestor element.

The result is as shown in the following screenshot:

StackPanel

The StackPanel control allows us to pile up child controls in horizontal or vertical rows. We can nest several StackPanel controls. This combination makes it possible to implement complex layouts, as shown in the following code and the resulting screenshot:

<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
  <Image Source="./images/Hydrangeas.jpg" Height="200" Margin="5"/>
  <StackPanel Orientation="Horizontal">
    <Image Source="./images/Chrysanthemum.jpg" Height="100"  Margin="5"/>
    <Image Source="./images/Hydrangeas.jpg" Height="100" Margin="5"/>
    <Image Source="./images/Jellyfish.jpg" Height="100" Margin="5"/>
  </StackPanel>
</StackPanel>

Copy

Grid

A grid permits us to place content in rows and columns. The concept is similar to an HTML table, but much more evolved. Before you start adding controls to the grid, you need to specify its layout. This is done with the Grid.RowDefinitions and Grid.ColumnDefinitions collection.

To set the position of the element inside the grid, we use the attached properties Grid.Row and Grid.Column . The first position starts at 0. To establish the width or height of a given row or column, we can use a fixed pixel width/height. Let the layout manager autoadjust the size to the space available (auto), or provide a given width/height based on percentages instead of pixels.

<Grid x:Name="LayoutRoot" Background="White">
  <Grid.RowDefinitions>
    <RowDefinition Height="100"/>
    <RowDefinition Height="100"/>            
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="150"/>
    <ColumnDefinition Width="90"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <Image Source="./images/Desert.jpg" 
    Height="100" Margin="5" 
  Grid.Row="0" Grid.Column="0"/>
  <TextBlock Text="Desert" 
    Grid.Row="0" Grid.Column="1"/>
  <TextBlock Text="Geographical area whose average annual precipitation is less than 250 millimeters (10 in) per year." 
    Grid.Row="0" 
    Grid.Column="2"
    TextWrapping="Wrap"
  />

  <Image Source="./images/Tulips.jpg" 
    Height="100" Margin="5" 
    Grid.Row="1" Grid.Column="0"/>
  <TextBlock Text="Tulip" 
    Grid.Row="1" 
  Grid.Column="1"/>
  <TextBlock Text="Perennial, bulbous plant which belongs to the family Liliaceae." 
    Grid.Row="1" 
    Grid.Column="2"
    TextWrapping="Wrap"
  /> 
</Grid>

Copy

Controls

Silverlight offers us a series of user controls, which are available in the Toolbox palette. The most common ones are shown in the following screenshot:

You can find additional controls (for free) in the Silverlight Toolkit (http://silverlight.codeplex.com/). There are plenty of commercial libraries available.

Now we will lay out the main window of our application:

This window lets the user see the meeting room reservations which are already made, as well as edit them, or create new ones.

First, we must create a new project, and then edit the XAML code of the MainPage file.

We must now define three rows to the grid layout container:

The resulting user control includes the grid and rows created:

<UserControl x:Class="ReservationLayout.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:DesignHeight="300" d:DesignWidth="400">

  <Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
      <RowDefinition Height="300"/>
      <RowDefinition Height="300"/>
      <RowDefinition Height="90"/>
    </Grid.RowDefinitions>
  </Grid>

</UserControl>	

Next, we must add a DataGrid control to the layout and indicate the row in which its parent container will be assigned:

<UserControl 
  x:Class="ReservationLayout.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"
  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
  mc:Ignorable="d"
  d:DesignHeight="300" d:DesignWidth="400">

  <Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
      <RowDefinition Height="200"/>
      <RowDefinition Height="150"/>
      <RowDefinition Height="90"/>
    </Grid.RowDefinitions>

    <sdk:DataGrid Grid.Row="0"/>
  </Grid> 
</UserControl>

If we execute the application, the result is not very appealing. We will only see a white rectangle that represents the DataGrid control. We will learn how to manage this control in subsequent chapters. For now, we will add some column definitions to make it look more similar to the following example screen.

To make it easier, we have to select the DataGrid object and use the Properties tab.

The following is the XAML that we get:

<sdk:DataGrid Grid.Row="0" AutoGenerateColumns="False">
  <sdk:DataGrid.Columns>
    <sdk:DataGridTextColumn
      CanUserReorder="True" 
      CanUserResize="True" 
      CanUserSort="True" 
      Header="City" 
      Width="Auto" 
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True" 
      CanUserResize="True" 
      CanUserSort="True" 
      Header="Building"
      Width="Auto" 
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True"
      CanUserResize="True" 
      CanUserSort="True" 
      Header="Room" 
      Width="Auto" 
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True" 
      CanUserResize="True"
      CanUserSort="True" 
      Header="Date" 
      Width="Auto"
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True" 
      CanUserResize="True" 
      CanUserSort="True" 
      Header="Start" 
      Width="Auto"
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True"
      CanUserResize="True" 
      CanUserSort="True" 
      Header="End" 
      Width="Auto" 
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True" 
      CanUserResize="True" 
      CanUserSort="True" 
      Header="Comments" 
      Width="*" 
    />
  </sdk:DataGrid.Columns>
</sdk:DataGrid>

Let's take a look at the final result:

We now move to the detailed area. The easiest thing to do here will be to design the page using Expression Blend or Visual Studio. We will use the knowledge acquired in this chapter to design the window manually using grid control. To do this, we must define the following area of rows and columns:

The generated XAML can be seen in the code that follows. A few things should be taken care of. They are:

<Grid Grid.Row="1" HorizontalAlignment="Center" MinWidth="670" Margin="5">
  <Grid.RowDefinitions>
    <RowDefinition Height="25"/>
    <RowDefinition Height="30"/>
    <RowDefinition Height="80"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="200"/>
    <ColumnDefinition Width="250"/>
    <ColumnDefinition Width="220"/>
  </Grid.ColumnDefinitions>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="0" 
    Grid.Column="0">
    <TextBlock 
      Text="Country" 
      Margin="0,5,5,0"/>
    <ComboBox Width="143"/>
  </StackPanel>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="0" 
    Grid.Column="1">
    <TextBlock 
      Text="City" 
      Margin="0,5,5,0"
    />
    <ComboBox Width="221"/>
  </StackPanel>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="0" 
    Grid.Column="2">
    <TextBlock 
      Text="Building" 
      Margin="0,5,5,0"/>
    <ComboBox Width="100"/>
  </StackPanel>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="1" 
    Grid.Column="0"
    Margin="0,5,0,0"
    >
    <TextBlock 
    Text="Date Reservation" Margin="0,5,5,0"
    />
     <TextBox Width="90"/>
  </StackPanel>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="1" 
    Grid.Column="1"
    Margin="0,5,0,0"
    >
    <TextBlock 
      Text="Start Time" 
      Margin="0,5,5,0"
    />
    <TextBox Width="70"/>
    <TextBlock 
      Text="Duration" 
      Margin="0,5,5,0"
    />
    <TextBox Width="61"/>
  </StackPanel>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="1" 
    Grid.Column="2" 
    Margin="0,5,0,0"
    >
    <TextBlock 
      Text="Room" 
      Margin="0,5,5,0"/>
    <ComboBox Width="113"/>
  </StackPanel>

  <StackPanel 
    Orientation="Vertical"
    HorizontalAlignment="Left" 
    Grid.Row="3" 
    Grid.Column="0" Grid.ColumnSpan="3" 
    Margin="0,5,0,0"
    >
    <TextBlock 
      Text="Comments" 
      Margin="0,5,5,0"/>
    <TextBox 
      Width="599" 
      Height="50"/>
  </StackPanel>

</Grid>

The result of the page layout is as follows:

We will add the control panel in the lower part of the window to complete the layout. We will use a StackPanel container with horizontal orientation to do so.

<StackPanel 
  Grid.Row="2" 
  Orientation="Horizontal" HorizontalAlignment="Right">
  <Button Content="New" 
    Width="60" Height="30"/>
  <Button Content="Save" 
    Margin="5,0,0,0" 
    Width="60" Height="30"/>
  <Button Content="Delete" 
    Margin="5,0,0,0" 
    Width="60" Height="30"/>
</StackPanel>

We have now laid out our window as shown in the following screenshot:

In this chapter, we have assimilated the fundamentals of Silverlight architecture, installed the necessary tools, implemented the classic 'Hello World' project, and learned some basic concepts related to XAML.

The main points to be remembered are as follows:

In the next chapter, we will begin with some concepts concerning management applications. Similarly, we will learn how to add windows and dialogs, as well as how to implement navigation between those windows.