SingingEels : Development Community & Resource

Articles

• ADO.NET (2)
• ASP.NET (31)
• LINQ (4)
• Security (2)
• Silverlight (2)
• SQL (7)
• Standards (5)
• WCF (1)

Syndication

• Articles RSS
• Blogs RSS

Contribute

• Our Authors List
• Member Sign-Up
• Suggestions Box

Silverlight Basics - XAML and Layout

Silverlight is a powerful, but very different tool than most .NET developers are used to. This article will teach all the basics of getting your Silverlight application to look and feel the way you want it.

Until you become familiar with Silverlight, you may be comparing it (in your mind) to Flash or Java applets. In the fact that Silverlight is a cross-platform browser plug-in that allows developers to create rich interactive applications on the web, then yes, Silverlight is similar to Adobe Flash, Flex and Java applets. But that's about where the similarities end.

The purpose of this article is not to compare and contrast Silverlight against other browser plug-ins, but here are a few important key points to remember about Silverlight that makes it stand out:

• Silverlight is basically a WPF (or Windows forms) application that happens to be resting inside of a web browser.
• Silverlight is intended to be used as a powerful client application, a rich media plugin or both. This is significant when you consider the fact that Flash was originally for animation, advertisements and video in web pages.
• Silverlight brings the powerful .NET framework (a mini version of it) to the client whether they are running Windows, Mac or Linux (with Moonlight). This means you get languages such as C#, VB.NET, Iron Python and Ruby. And programming features including LINQ and WCF.

Layout Options in Silverlight

If you're not familiar with WPF (the new way of designing Windows forms in .NET 3.5) then Silverlight will likely be your first exposure to XAML. It's likely that you know that it's an XML based language that is used for the layout and presentation side of your application, but that can lead you to some common misconceptions.

First of all, XAML is not as similar to HTML as you might think. For example, lets see the difference in making a table with two columns in HTML vs Silverlight. The two columns are just going to contain the text "this is column A" and "this is column B", respectively. Here is the HTML code:

That's simple enough. But now are you ready for the XAML code to do the same thing? Here it is in Silverlight:

Now before you go cursing the sky (or Microsoft) for this strange and nonsensical language, you should first try to understand the difference and the meaning behind the changes. I have to admit that at first, I didn't like the change, but after using Silverlight and XAML for a few days, I'm starting to love it - and it makes sense!

I'll explain some of these nuances as we go on. So let's look at a few "container" controls to do some basic layout in Silverlight. I've already shown you the "Grid" control, but there is also the "Canvas" and the "StackPanel". They all have a different purpose, and they're easy to use.

Silverlight Design - Canvas Control

The canvas control is the most basic of all of your layout options. You get the option to layout your controls with "absolute positioning", meaning you can set an Left and Top property (just like with HTML and CSS). We're going to make simple Silverlight app that has a few colorful rectangles on it. And because we're putting them in a Canvas control, we'll be able to absolutely position them. Here's the code:

There is something important to notice here. You probably saw it above with the "Grid.Column" property on the TextBlock above, and now with the "Canvas.Left" and "Canvas.Top" properties on these rectangles. These properties are *not* part of the Rectangle and TextBlock controls by default. Rather, because they are embedded in a Canvas (or Grid) control, they will automatically get special properties known as "attached properties". This is what the above XAML code would look like in a Silverlight application:

The Canvas control also gives you one more attached property, Canvas.ZIndex. This is just like the z-index property in CSS. By default, controls will sit on top of each other in the order you place them. But if you want one to be on top of the other in a different order, you can set the ZIndex higher (the default for all controls is 0).

Silverlight Design - Grid Control

Now we'll take another quick look into the "Grid" control. As we demonstrated earlier, the Grid control allows you to build tables for design and layout purposes. Again, we're going to use rectangles, but this time, we'll position them using the Grid.

Here is what the above XAML code renders as:

The Grid control gives you just four attached properties: Grid.Column, Grid.Row, Grid.ColumnSpan and Grid.RowSpan. With the Grid control, you first define the "ColumnDefinitions" and the "RowDefinitions" as I have done above. Then, on your controls themselves (because of the attached properties), you specify which row and column you want to be a part of.

A few more points to know about the Grid control:

• Controls inside of the Grid container will default to 100% width and 100% height.
• You can specify "pixel" sizes (as in my example above). Or you can specify "relative sizes".

Relative sizes means that if you want the first column to be twice as big as the second column, but both stretching to the size of the container, you can specify a width of "*2" on the first column and "*1" on the second. Here is an example of the code and what it will look like:

The only thing I changed was the width of the columns. I specified that the columns should stretch on a "2 to 1 scale". Here's the result:

Silverlight Design - StackPanel Control

The last panel control that we'll demonstraight is the StackPanel. Unlike the Canvas and the Grid control, you can't make the StackPanel your root element, so we'll put ours in a Canvas for simplicities sake. I don't think I have to explain that the "StackPanel" will "stack" your controls on top of each other, but we might as well take a quick look. Here's the XAML code:

And, of course, here's the result:

That's about it for the layout options for Silverlight. It's true that WPF has a few more controls than Silverlight (at least at this point it does), but these options are more than enough to do whatever you want in terms of layout. Next we'll take a look at some of the controls that Silverlight brings to the browser itself, one of the coolest being the DataGrid.

If you have tried to check out Silverlight in the past, but you couldn't get passed basic layout issues, hopefully this article has answered your questions and rekindled your desire to get into this great new tool.