Microsoft Silverlight Quick Walkthrough

Hi All,

Here I'm going to give you a quick tutorial on Silverlight for anyone who would like to start developing a Silverlight Application. There are ample resources for learning Silverlight on the internet and of course you should refer MSDN for a good learning. So lets start.

What is Silverlight ? 

It's a cross-browser, cross-platform .Net framework implementation for developing Rich Interactive Applications (RIA) for web. Not only web, this can be used to develop Desktop applications as well as in Windows Phone Application Development.

• It's a plugin to the browsers.
• Runs on all major browsers.
• User needs to download and install Silverlight Player.
• Allows to create Rich Text Web Applications.
• Gave ability to create rich web apps with VS environment with good programmability.
• It’s a subset of .Net Framework.

When you are developing Silverlight Applications, you will see that you cannot use the System.Data namespace in your application. Therefore when you need to create you have to use WCF to provide database support for your application.

Lets go through a small Silverlight Application.

Create a new Demo Application check the option to host the Silverlight Application in a new website. This option will create a web project with a Silverlight Application test page.

App.xaml is like a startup guide. It’s got events, when things to start-up. When you create Silverlight Application it will zip the project into a .xap file.

Don’t just drag and drop the controls, that will just create a web site not like flow layout. That won’t get adjusted when you resize the browser. We will discuss later how we can make them more dynamic.

The markups that will be created in your design window, when you drag and drop a button are the XAML markup. It tells how the button should be : width, height etc.

You can use the StackPanel to stack the items in your application vertically. You can also change that to stack the items in horizontal direction.

Document outline provides you all the parent child relationship of the controls. Everything is usercontrol in Silverlight. Inside that, you’ll have parent and child controls. You can see the relationship in the Document Outline.

Grid is like a html table. It allows you to create rows and columns. 

<Grid x:Name="LayoutRoot" Background="White"></Grid>

You can use the canvas controller to provide an absolute layout. Provides an absolute positioning. It will position the child controls relative to the parent control.

You will see attributes like Canvas.Left="6" Canvas.Top="6" in your XAML code. These are called attached properties. 

To create rows and columns in the Grid, you can easily use the Design View.You can click on that border to create row column definitions. You can move the cross and click to define rows/columns.

You can create a grid like below using the above method. 

Following image will give you the idea about Margin, Padding, Border and Content. You can learn more about alignment from this link. Margins and paddings are just like in CSS. Top-right-bottom-left order is different in XAML. It starts with Left.

Don’t use hard coded row/column sizes. You can make them auto.

<Grid x:Name="LayoutRoot" Background="White">

   <Grid.RowDefinitions>

      <RowDefinition Height="Auto" />

      <RowDefinition Height="2*" />

      <RowDefinition Height="*" />

Make use of auto sizing. That will help you a lot.

Once you are not sure about the sizes and if you want to reset them, you can just right click on the controllers and then Reset Layout-> All and all the styles will be removed. 

If you want to insert columns/rows you can just add them above or below the columns/rows and the XAML will be updated accordingly in the designer.

You can add styles like margins by clicking on the control and updating the Margin property in the property window.

So as this is a demo application this will be fine to add margins by adding them on each one. But imagine a situation where you want a consistent style throughout the application with hundreds of controls. It will be a nightmare to do that. So how can we do it easily?

So first we want to remove margins. You would just select all controls and set the margin to 0. But that won’t remove the style from the markup.

But you can remove the markup by resetting the values.

 This will remove the markup from your XAML.

In like CSS in web, we can define behaviors for controls in XAML. We have to create these resources/ set of styles at many different levels.

So let’s go to Gird and create Grid.Resources Element and inside that we can add a style with a target type. Inside the style, we can set the properties where the styles should be added. 

So the margins will be added to textblocks within the grid. So lets apply this style from the UserControl level.

Remove the Grid.Resources and then lets add new element inside user control named UserControl.Resources

<UserControl.Resources>

        <Style TargetType="TextBlock">

            <Setter Property="Margin" Value="10"/>

        </Style>

        <Style TargetType="TextBox">

            <Setter Property="Margin" Value="10"/>

        </Style>

</UserControl.Resources>

So if you want to apply the style to the whole application, you can do that by applying the style to App.xaml page. So remove the style from the UserControl.Resources and go to the App.xaml page and add inside the Application.Resources Tag. 

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

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

             x:Class="DemoApplication.App"

             >

    <Application.Resources>

        <Style TargetType="TextBlock">

            <Setter Property="Margin" Value="10"/>

        </Style>

        <Style TargetType="TextBox">

            <Setter Property="Margin" Value="10"/>

        </Style>

    </Application.Resources>

</Application>

So now we have the style in a global scope.

You can even move these styles into a resource dictionary. You can put it into a Silverlight class library and you can reference that throughout the application. That’s great for corporate branding.

There are keyed styles, where you can attach the names into these and specifically reference to them.  

<Style TargetType="TextBlock" x:Key="TextBlock.Normal">

            <Setter Property="Margin" Value="10"/>

</Style>

Now you can apply the styles by editing the style property in the control’s window.

Let’s see how would be the XAML by now. 

<TextBlock Name="textBlock1" Text="First Name" Style="{StaticResource TextBlock.Normal}" />

You can also apply styles on another property called “BasedOn”. So that will add additional styles, based on that style.

However the local Style will always get the priority, so that the lowest one can override the global styles.

You can use many more controls like, sliders, media players, text boxes, password boxes etc.

Binding

Bind a checkbox with two child checkboxes so that if only the main is checked, others will be checked.

Bind text boxe text with a class. Instantiate the class in XAML markup. Add the class reference.

 <UserControl.Resources>

        <data:Customer x:Key="myCustomer" FirstName="Kinath" LastName="Rupasinghe"/>

</UserControl.Resources>

Binding a list of cutomers to a data grid.

Class file.

public class Customer

    {

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string FullName

        {

            get

            {

                return this.FirstName + this.LastName;

            }

        }

    }

    public class Customers : List<Customer>

    {    }

XAML : 

<UserControl.Resources>

        <data:Customers x:Key="customerCollection">

            <data:Customer FirstName="Kinath" LastName="Rupasinghe"/>

            <data:Customer FirstName="Kinath" LastName="Rupasinghe"/>

            <data:Customer FirstName="Kinath" LastName="Rupasinghe"/>

        </data:Customers>       

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">       

        <sdk:DataGrid AutoGenerateColumns="True"

                      Height="189" HorizontalAlignment="Left" Margin="12,99,0,0"

                      Name="dataGrid1" VerticalAlignment="Top" Width="376"

                      ItemsSource="{Binding Source={StaticResource customerCollection}}" />

    </Grid>

This will produce an application like this. 

So this is just a quick tutorial on how we can use Silverlight. Hope this would help. 

Thank You.