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.
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 visualise 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.
Defines an area within which you can explicitly position child elements by coordinates relative to the Canvas area. This means that you specify exactly using coordinates, where the elements go on the page.
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.
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.
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 the 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 one 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 the 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” />.
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 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). Once this has been added, you can add the required logic in the method body.
Databinding to objects can be a little tricky. It takes a little getting used to the small differences. 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 the ItemSource property is used to display the collection instead of the Content property.
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.