Silverlight Journey: Controls and Layout

This is the second round at looking into Silverlight. In this post, I will be looking at the layout structure of the canvas as well as controls available to the user and how to use them.

Types of Silverlight Canvases

The layout system works in a similar way to the way an aspx page is constructed. Since XAML is a markup language that can be viewed to work in a similar way to aspx, this makes it a little easier to visualize when working with it. Simply put, to get started, you would need to choose a layout type to put controls on. From what I have read, there are three types of layouts that can be used: Canvas, Grid, StackPanel.

• Canvas

  Defines an area within which you can explicitly position child elements by coordinates relative to the Canvas area. This means that you can:

  

• Grid

  Defines a flexible grid area consisting of columns and rows. For this layout, you would set where the control is by setting which cell control is in by setting the column and row properties of the object. This seems to be most common layout used.

  

• StackPanel

  Arranges child elements into a single line that can be oriented horizontally or vertically. There is a property on the StackPanel that governs the orientation of the objects.

  

How to organize the layout I have chosen to use the grid layout as it seems to be simple yet powerful enough to handle most scenarios. To start off using this, you need to add the grid layout. Once you have added the grid, all that is required is to define the number of columns and rows by using the <Grid.ColumnDefinition> object in the grid. Inside this, you add a <ColumnDefinition> for each column that you want (refer to the picture in the grid section above). Adding rows is pretty much the same. You need to add a <Grid.RowDefinition> as well as <RowDefinition> objects for each row that you want to add. Once this is done, you are ready to add controls.

To add a control, you can use the toolbox and click and drag onto the grid or manually type it in. To specify where you want the button, use the Grid.Row and Grid.Column properties. Please note that these rows and columns are zero indexed so this means that the first row starts at zero instead of one.

The Silverlight toolbox comes packed with controls for you to use. I will try and go through the important ones as well as the standard controls to give you an overview of what is out there.

There are standard controls that you would expect, for example textbox, button label controls as well as checkbox, etc. are all included in the Silverlight toolbox. Adding a control to the layout is simple as you can see above. Depending on the control, all that is needed is to put the XAML control with preferred properties, for example:

<Button Content="Click Me" Height="23" HorizontalAlignment="Left" 
Margin="72,98,0,0"  Name="EventButton" 
VerticalAlignment="Top" Width="75" 
Click="EventButton_Click" />  

Like I have said before, the control’s look and feel are very similar to aspx controls.

The Silverlight toolbox comes with a few more exotic and fun controls. These include Autocompletebox, calendar, DatePicker, TreeView and DockPanel. I haven’t listed them all here as you are welcome to have a look and add them to your project.

The event handling of the controls work in much the same way you would be used to. To attach an event to a control, add the control as a property i.e., click=””. Then define the event handler in the code behind, i.e., EventButton_Click(object sender, RoutedEventArgs e). From there, you would do whatever logic is in the application.

Databinding to objects can be a little tricky. It takes a little getting used to the small differences. Databinding to a single item is fairly simple. The controls have a property that you can use to bind to the data.

Databinding to a list is a little different, but works in a similar way. The DataContext property is the property to use to link the collection of items to the control. The only difference is that the ItemSource property is used to display the collection.

I hope this has been useful. I will continue to look deeper into Silverlight over the coming weeks, but I hope this will help you get a start to building rich client experiences.

CodeProject