I recently published an Xbox Gamercard based on Silverlight 2 Beta 1. In that post a talked a little bit about the XAP model which now allows you to embed Silverlight applications via the object. In Silverlight 1.0 application instantiation was handled via JavaScript and HTML with loose files. Now with the XAP model we have a single file and object tag support which allows for simpler embedding of an application. Especially by a non-developer web user, which is the main audience for the Gamercard application.
In this three part series I will highlight a few of the new features in Silverlight 2 and how the application was built. In this first part, I'll cover how the interface for the application was composed.
First stop the Grid
Ah, the mighty Grid, master of layout panels. The Grid is the embodiment of what you always wanted from the HTML table. That is, of course, back in the old days when you were still using the table for layout.
The screenshot to the right shows the Grid used for the Gamercard with the ShowGridLines property turned on. GridLines can be very useful as an aid when in design mode, whether you're working in Blend or Visual Studio. The Grid is the main container of all the elements seen on the screen.
Like the HTML table, the Grid is made up of Columns and Rows and elements can span multiple Columns or Rows using ColumnSpan and RowSpan, respectively.
Unlike the HTML table there is no table cell concept. Each Element defines its location using attached properties provided by the Grid class instead.
The TextBlock at the bottom of the grid with the text value of "Shadowrun (G 885/1000)" is defined in XAML as:
This places the TextBlock in the first column (0) which is the default value of Grid.Column and in the fourth Row based on the value set. It also spans both columns to make room for longer text that would not fit in the first column which has a width of 76 pixels.
Columns and Rows are defined and their values are set using the ColumnDefinitions and RowDefinitions. In the case of the Gamercard, the height and width of each column and row is set to a specific value except for the last one which is set using the star (*) syntax.
The star denotes proportional sizing, which means here the last Row and Column take up the remaining space in the Grid not yet claimed by other Columns or Rows.
Proportional sizing can also be used across Columns or Rows. For example, the width of the first column could be set to "*" and the second set to "2*". If the Grid was 150 pixels wide, the first column would end up being 50 pixels wide and the second column would be 100 pixels wide.
For more on Grids check out Jesse Liberty's Controls Tutorial or his Grids and Stack panels video.
Composing Controls
Another great feature of Silverlight is the ability to compose controls. In the Gamercard application, a HyperlinkButton control is used to link to the Gamertag profile page. Rather than simply using text for the link, in this case I wanted to use the the Profile Image which was easily accomplished using the XAML below:
The first child element is the attached property for ToolTip, similar to the Grid.Row property mentioned above. Although not a part of the HyperlinkButton's composition, this shows a simple version of implementing the Content property. The same property is available on the HyperLinkButton control which could be set to a string value, which is how we would define a simple text link.
As mentioned though, we want to customize the Template of the Content property which is done implicitly when child nodes that are not attached properties or added within the Control. Content can only hold a single child, which was why the Canvas element is added first as a simple container. After that a Rectangle and an Image control is added to provide the custom look. And due to the composing functionality, the Hyperlink links to the profile page whether you click the Rectangle or the Image.
The extra attributes on Rectangle and Image provide the round corners as well as clipping the raster image so it appears that it has transparent round corners. I found the clipping method to be very useful when customizing images provided by an external service.
...pausing to think about more mashup possibilities...
For more on Composing Controls check out Jesse Liberty's Controls Tutorial. And if you have not watched it yet please check out Karen Corby's Controls presentation at MIX08. The slides and sample code is available and she does a great job showing off how to compose, style and skin controls.
Other parts in this series are available:
- Building the Gamercard Part 2, Retrieving the Data
- Building the Gamercard Part 3, Updating the UI
XAP, silverlight+controls, silverlight