Silverlight Feedbooks RSS Browser - Part 2
Creating a Thumbnail Grid
Introduction
In Part 1 of this tutorial we stepped through the process of fetching and parsing an RSS feed from Feedbooks.com the results of which were bound to a DataGrid UI Control.
In this post we will detail how we can use the new WrapPanel and ViewBox controls, which are a part of the Silverlight Toolkit December 2008 release to create grid of thumbnails from a Feedbooks RSS source.
Feedbooks RSS Browser Application
The Silverlight Toolkit
From the Silverlight Toolkit codeplex site:
The Silverlight Toolkit is a collection of Silverlight controls, components and utilities made available outside the normal Silverlight release cycle. It adds new functionality quickly for designers and developers, and provides the community an efficient way to help shape product development by contributing ideas and bug reports. It includes full source code, unit tests, samples and documentation for 12 new controls covering charting, styling, layout, and user input.
Which means that we can expect new Silverlight goodies from Microsoft periodically. In the December 2008 release of the Toolkit Microsoft added new UI Controls including WrapPanel and ViewBox which we can use to move our Feedbooks Browser UI from a boring, single column ListBox control to a glorious multi-column grid of thumbnails.
You can also check out the Silverlight Toolkit Online Example site for an interactive example of the other controls included in this release of the Toolkit.
Adding a Toolkit Assembly and Namespace to our Project
Assuming that we are starting from the source code from first part of this tutorial, we will need to add the Microsoft.Windows.Controls Assembly that came in the Dec 08 Toolkit to our project as a reference and then create a namespace for the XAML that will reference it.
If you have not already done so, download the Silverlight Toolkit December 2008 release.
After unzipping the toolkit download, you should save the dll files therein (the Toolkit Assemblies) to a known location on your hard drive. I suggest somewhere like C:\Program Files\Microsoft SDKs\SilverLight\v2.0\Dec_08_Toolkit\ but it is up to you.
You can then add this Assembly to your project by choosing Add Reference… from the right click menu of the References folder and locating the Microsoft.Windows.Controls Assembly from the Browse tab.
Defining a namespace for this assembly looks like this:
…
xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”
xmlns:controls=”clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls”>
Once this Assembly and namespace have been added to our project we can define XAML for the new toolkit controls.
Adding a Bitmap Member to our Value Object Class
Before we add the WrapPanel and ViewBox to Page.xaml, we will add one more public member to our FeedbooksBook Value Object Class. Below the getter/setter for ThumbUrl, add a getter/setter for Thumbnail:
….
public string ThumbUrl { get; set; }
public BitmapImage Thumbnail { get; set; }
We will set this value of the BitmapImage in the setter for BookXml based on the value of ThumbUrl:
…
ThumbUrl = ThumbXml.Attribute(”src”).Value;
Thumbnail = new BitmapImage(new Uri(ThumbXml.Attribute(”src”).Value));
Now this bitmap can be bound to an Image control in our UI to create a thumbnail of the book cover.
Adding a ListBox in XAML
To start with, we will change our Page.xaml to use a ListBox UI Control instead of the DataGrid we looked at in the first tutorial.
To do this open Page.xaml and change this:
<!– Data Grid–>
<data:DataGrid Grid.Row=”1″ x:Name=”dgFeedbooks” AutoGenerateColumns=”True”/>
To this:
<!– Thumbnail Grid–>
<ScrollViewer Grid.Row=”1″ Margin=”7,0,7,0″ Background=”#FFDAE8F5″>
<ListBox x:Name=”Thumbnails” Margin=”10″>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush=”#FFC9D6DF” BorderThickness=”1″ CornerRadius=”0″ Margin=”0,0,0,0″ Padding=”0″>
<StackPanel Orientation=”Vertical” Width=”145″ Background=”#ffe1edf9″>
<!– Book Thumbnail –>
<controls:Viewbox Height=”110″ Width=”70″ VerticalAlignment=”Bottom”>
<Image Source=”{Binding Thumbnail}” Margin=”5″ />
</controls:Viewbox>
<!– Book Title –>
<TextBox Text=”{Binding Title}” Height=”35″ Width=”150″ Margin=”0,5,0,10″ TextAlignment=”Center” IsReadOnly=”True” TextWrapping=”Wrap” BorderThickness=”0″ Background=”#d3e3f4″/>
<!– Download Button –>
<Button Content=”Download” Width=”65″/>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
Which substitutes a ListBox control for the DataGrid control.
Notice that our ListBox is using a DataTemplate as the ItemTemplate of the ListBox. This allows us to control the way in which the data in the FeedbooksBook objects are displayed in the control.
Within the DataTemplate, we lay out our UI control using a vertical StackPanel and include an Image control displayed inside the new ViewBox control. The Image source is bound to Thumbnail property of the FeedbooksBook object with the {Binding Thumbnail} directive. Likewise the {Binding Title} is used to bind the Title Property to our TextBlock control.
Notice also that we also changed the x:Name attribute of the control from dgFeedbooks to lbThumbnails which means we have to change the line in Page.xaml.cs that sets the ItemsSource property of the UI control.
//set the datagrid listbox to use the books list
lbThumbnails.ItemsSource = BooksList;
If we compile and test at this point we should get something that looks like this:
Creating a Multi-Column Thumbnail Grid with WrapPanel
To move from the one column layout of the ListBox, we will use the new WrapPanel control that comes in the December 08 Silverlight Toolkit.
Defining a horizontally oriented WrapPanel as the layout template for the data items (FeedbooksBooks) in our control should cause the list box to display as many thumbnails as it can across the control width, wrapping the extra one to the next line. This works automatically when resizing the control with the browser window -without having to send resize events ourselves. [Thank You Silverlight Toolkit Team!]
From a XAML point of view this is quite simple. Before the ListBox.ItemTemplate block we will add and ItemsPanelTemplate and then reset the ControlTemplate so that our control’s render tree is refreshed and the UI redrawn.
<ListBox x:Name=”lbThumbnails” Margin=”10″>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<controls:WrapPanel Orientation=”Horizontal” />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
…
The ItemsPanel of ListBox Control affects the layout and appearance of the elements within the control that contain data items.
The ControlTemplate affects the visual structure and behavioral aspects of the control itself. I think that by resetting the ControlTemplate’s ItemPresenter we cause the control to be redrawn, using a WrapPanel to layout our thumbs, since it does not work without doing this. [But If this is erroneous a comment setting me straight would be great 
]
If we compile and test, we should see our grid of thumbnails.
Categories Menu
The final step for this little demo app is to add the Categories menu that switches the Feedbooks feed. This involves adding a ComboBox that recalls our WebClient with a different URI. If you’re interested you can look at this how this is done in the Demo Source Code.
Next Steps
I think a logical next step for this application would be to move from using the Feedbooks RSS feeds to their ATOM feeds or else using their REST-based API for more interesting book queries.
Other possibilites are being worked on as well; stay tuned: we are having a lot of fun playing with Silverlight, .NET, Feedbooks and the UI experiences that accompany them!
-Patrick
Patrick Keating is the Technical director at Seattle-based interactive agency Bluefire Productions.