Silverlight 2 - MSN Video ListBox |
|
NOTE TO RSS READERS: Click this link to see the images and source code correctly.
This is just one of those days: I have been redoing my Silverlight project for 5 times now and tried about 10 ways to do the same thing. All resulting in nothing. Not the result I wanted and not an error, If I had any hair I would have pulled it out. But I guess the choice to go work with a beta product was my own.
Onto the real reason of this blog post: to prevent you from having the same terrible day. I was able to reproduce the error in a test project which will also demonstrate some nice features of SL that do work as expected :).
The end result
Usually I don’t begin with the end, but I always like to visualize what I’m going to make:
and we will be using a the Random MSN Video service as our data source:
http://catalog.video.msn.com/randomVideo.aspx?mk=us&vs=0&df=99&c=10
For the lazy (most of us developers/designers), here is the source code we are going to create:
New Project
We start out by creating a new Silverlight Project in this demo I assumed it to be named SilverlightApplication2:
And in the next screen select "Add a new Web to the solution for hosting the control" and select "Web Application Project".
After the 2 projects are created, set SilverlightApplication2TestPage.aspx as your start page.
XML to Objects for Databinding
Silverlight does not yet support the direct XML databinding available in WPF. So we will have to do our binding by hand. First let’s create the data model we will be using: Add a new class "VideoFeedItem.cs" to the SilverlightApplication2 project with the following code:
public class VideoFeedItem
{
public string Title { get; set; }
public string Source { get; set; }
public string PublishDate { get; set; }
public string Description { get; set; }
public string ImageUrl { get; set; }
public string VideoUrl { get; set; }
public string ViewCount { get; set; }
}
Then add a new class "VideoDS.cs" to the SilverlightApplication2 project, I have added code comments to explain what it does:
/// <summary>
/// This class will load from a webservice and
/// provide a datasource which we can bind to from XAML.
/// </summary>
public class VideoDS : INotifyPropertyChanged
{
// Webservice URI & Namespace
private const string _randomVideo = "http://catalog.video.msn.com/randomVideo.aspx?mk=us&vs=0&df=99&c=10";
readonly XNamespace _NS = "urn:schemas-microsoft-com:msnvideo:catalog";
// Bindable Collection
public ObservableCollection<VideoFeedItem> RandomVideos { get; set; }
public VideoDS()
{
// Only load the video feed when we are in the browser (Not in blend/VS)
if (HtmlPage.IsEnabled)
LoadVideoFeed();
}
/// <summary>
/// Load the video feed and put it into our collection
/// </summary>
private void LoadVideoFeed()
{
// Use a normal webclient to fetch the feed
var wc = new WebClient();
// New lambda style delegate declaration
wc.DownloadStringCompleted += (sender, e) =>
{
var doc = XDocument.Parse(e.Result);
// Linq Select from the XML Tree and create a new VideoFeedItem for each selected.
var videos =
from video in doc.Descendants(_NS + "video")
select new VideoFeedItem()
{
Title = (string)video.Element(_NS+"title"),
Source = (string)(video.Element(_NS + "source").Attribute("friendlyName")),
PublishDate = DateTime.Parse((string)video.Element(_NS + "startDate")).ToShortDateString(),
Description = (string)video.Element(_NS + "description"),
ImageUrl = GetUriAsset(video.Element(_NS + "files"), "file", "2007"),
VideoUrl = GetUriAsset(video.Element(_NS + "videoFiles"), "videoFile", "1002"),
ViewCount = (string)video.Element(_NS + "usage").Element(_NS + "usageItem").Attribute("totalCount"),
};
// Add the results to the Collection
RandomVideos = new ObservableCollection<VideoFeedItem>();
foreach (var video in videos)
RandomVideos.Add(video);
// Notify all listeners that the data has changed
PropertyChanged(this, new PropertyChangedEventArgs("RandomVideos"));
};
wc.DownloadStringAsync(new Uri(_randomVideo));
}
#region LINQ Uri Helper
/// <summary>
/// Helps with the finding of some data in the complicated XML Structure
/// </summary>
private string GetUriAsset(XContainer element, string nodeName, string formatCode)
{
var uris = from file in element.Descendants(_NS + nodeName)
where (string)file.Attribute("formatCode") == formatCode
select (string)file.Element(_NS + "uri");
return ((uris.Count<string>() > 0) ? uris.First<string>() : string.Empty);
}
#endregion
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
#endregion
}
Binding
Now that we have setup the classes necessary for the data loading and binding, let’s add the ListBox to our page.xaml. Page.xaml should look like this:
<UserControl x:Class="SilverlightApplication2.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:SilverlightApplication2="clr-namespace:SilverlightApplication2"
mc:Ignorable="d"
Width="600" Height="200">
<UserControl.Resources>
<SilverlightApplication2:VideoDS x:Key="VideoDS" d:IsDataSource="True"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<ListBox ItemsSource="{Binding RandomVideos,
Source={StaticResource VideoDS}}"/>
</Grid>
</UserControl>
You can now run the application, it should look like this:
Template
As you see here, the listbox has found our collection, but has no clue whatsoever what to do with it. To tell it how it should display our data, we add ListBox.ItemTemplate and we change the orientation using the ListBox.ItemsPanel property:
<ListBox ItemsSource="{Binding RandomVideos, Source={StaticResource VideoDS}}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
This should result in the following (with other data ofcourse since the video’s are random):
I’m always a big fan of the separation of design and behavior, so let’s move the properties to a style. First remove the properties and add a Style to the ListBox:
<ListBox Style="{StaticResource ListBoxStyle}" ItemsSource="{Binding RandomVideos, Source={StaticResource VideoDS}}"/>
Style
And then add a Style to the UserControl:
<UserControl.Resources>
<SilverlightApplication2:VideoDS x:Key="VideoDS" d:IsDataSource="True"/>
<Style x:Key="ListBoxStyle" TargetType="ListBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
The above style does exactly the same thing as out previous properties does, so no changes in result here. As a design choice you could also add the Style to the Resources in the App.xaml.
Image Binding
Next we’ll add an Image to the mix. We’ll also add a StackPanel and some Margin to make it look a little bit better.
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Width="200">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Center" Margin="5,5,5,0"/>
<Image Height="120" Stretch="Uniform" Source="{Binding ImageUrl}" HorizontalAlignment="Center" Margin="10,10,10,10"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
Build and run the project, it should look something like this:
UserControl in a Style
To get a little bit more control over the video, we are going to move the content of the <DataTemplate> to a User Control. Add a new Silverlight UserControl to the project with the name : VideoFeedItemControl.
Move the XAML from the <DataTemplate> to the new usercontrol:
<UserControl x:Class="SilverlightApplication2.VideoFeedItemControl"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot">
<StackPanel Width="200">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Center" Margin="5,5,5,0"/>
<Image Height="120" Stretch="Uniform" Source="{Binding ImageUrl}" HorizontalAlignment="Center" Margin="10,10,10,10"/>
</StackPanel>
</Grid>
</UserControl>
And place the <VideoFeedItemControl> in the Page.xaml <DataTemplate>:
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<SilverlightApplication2:VideoFeedItemControl/>
</DataTemplate>
</Setter.Value>
</Setter>
Ready to go, build and run. Let’s see our end result: 
Hey, wait a minute!? that’s not what we were aiming for. That’s empty!
We did not get any errors, everything seems to be working correctly, what happened here?
The error
This was the point where it got frustrating. It took me more than a day to figure out. Remember the namespace handling in the page.xaml? One of these was a reference to our own project. This was generated automaticaly.
I’m talking about this line:
xmlns:SilverlightApplication2="clr-namespace:SilverlightApplication2"
Nothing wrong with it, right?
If you know what the problem is, the fix is very simple. Add:
assembly=SilverlightApplication2.
It should now be:
clr-namespace:SilverlightApplication2;assembly=SilverlightApplication2
We build and we get:
That looks more like it!
So we only needed an assembly reference to the current assembly? Strange behavior.
I’m still looking for the reason, but at least it is fixed. The strangest thing is that if you would move the UserControl back to the normal page. The UserControl works normally without the need of the assemblyname= in the namespace declaration.
So it seems this only happens when a UserControl is used within a template or style declaration.
Would be nice to have
Ofcourse it is much more work to have running video’s in the listbox. And there are at least 20 more things I can think of that could nicely extend the sample.
Maybe next time 
Stay in the light!
Robertjan Tuit
RSS English
RSS Nederlands
[…] Silverlight 2 - MSN Video ListBox By robertjantuit We start out by creating a new Silverlight Project in this demo I assumed it to be named SilverlightApplication2:. image. And in the next screen select "Add a new Web to the solution for hosting the control" and select "Web Applocation … Robs Usability Development :… - http://www.robertjantuit.nl/ […]