Jesse Liberty - Silverlight Geek

Tip of the Day Returns from Disney - Master Detail in Silverlight 2

Source Code 

Okay, its true, I was having so much fun at Disney World (and if you've not been on Soarin, then find a conference in Orlando, and sneak out to Soar, yowza!) that Tip of the Day kinda' sorta' stopped for a day or two. But we're back again with more in depth explorations of the tutorials, and responses to your email (which, I note did not slow down very much while I was on vacation, which is great!).

So, today I'd like to lay out a schedule and a project and over the next couple days pursue that project and a few other topics as well.

I've received quite a bit of email about data binding, and Tip of the Day seems like a good place to explore various aspects of this essential feature. I've created a relatively simple starter application that we can take apart, rebuild and then extend to explore various aspects of data binding; taking on other topics as we go.

This Silverlight application consists of an outer grid that has been divided into two columns. In the left column I've placed a DataGrid and in the right column I've placed an inner grid with details about whatever book is selected in the DataGrid.  There is plenty to do to make this look nicer, but for now I'd like to focus on the simple layout and the data binding.

Here's the XAML that divides up the grids. I've collapsed the controls that populate the grids to make seeing the grids themselves somewhat easier,

The outermost grid is defined on line 5 and named LayoutRoot. It serves as the container for everything and is defined as having the size 800x600 and having a background color of Bisque.

This outer grid has one row (with a top and bottom margin). The rows are created on lines 11-15. On lines 16-22 are two columns, with two margins and a padding between the rows. The first column is fixed at 400 and the second column takes up the remaining space.

The first row and first column is populated by a DataGrid which is shown collapsed on line 23 (we'll return to that shortly).

The first row and third column (skipping one column for the padding) is a new grid named details.

In essence, the DataGrid holds the listing of all the books, the details shows all the data about the selected book.

The Details grid consists of six rows plus two margin rows, and two columns with padding between and a margin on either side. The left part of the details grid is set to 150, the right side gets all the remaining space (after allocation for the padding and margins).

The actual contents (data) for the details are shown collapsed on lines 64-88.

The layout is easier to see in the designer, especially if we add the attribute to each grid "ShowGridLines=True"

The steps to building this application, once we have the basic layout are

1. Create the business object (the book)
2. Create a collection of business objects (a list of books, a database of books)
3. Bind a DataGrid to that collection
4. Handle the selection changed event when the user clicks on a book
5. Get the book object selected and present its details in the grid on the right

Piece of cake.

We'll start by creating the Business object and its collection in the next Tip of the Day.