Creating basic SilverLight application (for beginners with HTML exposure)

In this tutorial, we will go over how to create a sample XAML (silverlight page) and display with some contents within the grid (table in HTML).

  Also we will go over, step by step to see how the tables in HTML is different from Grids in XAML and how they can be compared to get a better understanding. This will help us in getting a smooth transition from HTML to Silverlight. This tutorial just deals with very basic UI creation demo.

Lets get started with Silverlight application.... When you open a new project, make sure you select Silverlight from installed templates and select Silverlight application and click ok.

Once you click ok, in the next window, you can chose to host the silverlight app in a separate ASP.NET website or when you dont check it, it will generate a startup HTML page. Similarly, you get the option to chose an ASP.NET web or ASP.NET MVC project.

This window also provides the capability to chose the version of Silverlight that should be used to run the app. Once you click ok to create the project, you could see the file structure created below.

In our application, we will be working on a basic code to create and display how a grid works and also in comparison with html table tags.

 In html we have seen table created and handled in many ways as we wanted. Will walk through the html table tags first and their output and then we can follow the steps to generate the same in Silverlight.

In the above, I generated a 3 X 3 matrix and its corresponding output. Now lets see how to create the same in Silverlight.

 Lets start with xaml page listed above, when we look at MainPage.xaml, this is how the code looks. Here UserControl is the basic Content displaying control, which can display any UI elements like textbox, textblock etc.

Here Grid is the basic layout whose rows and columns will be bound to UI elements in this example. We will be expanding this grid with more rows and columns and add textblocks (similar to labels in html) to display their locations within the grid / table. Add the following code inside the grid.

Now press F5 to run.... You should see the following output...

This is a very simple and easy way to get started with Silverlight. In the above code, we could see the text for TextBlocks are displayed in two different ways to show this can be done. To make it more exciting, there are many other third party tools like Telerik that works great with Silverlight to create more easy handling controls for data display.

Happy coding...