Silverlight coverflow of Sharepoint contacts : part I

Here is a guide to implement a Silverlight 3.0 coverflow based on a Sharepoint contact list (WSS 3.0 or MOSS 2007).

The steps I'll follow are:

In this post :
Implement the Silverlight coverflow

In a next post :
Customize a sharepoint contacts library
Implement the Sharepoint contacts extraction
Deploy the XAP in Sharepoint
Add the Silverlight application to a Sharepoint page

Implement the Silverlight coverflow

Keep it simple; there is a very cool Ms-PL licensed Silverlight coverflow on Codeplex : http://silverlightcoverflow.codeplex.com/

Using this coverflow (contained in a StackPanel), we can customize its DataTemplate to customize the rendering of the data inside the coverflow.

What I want here is for each coverflow item to show a contact picture and name.

In Blend 3.0, I can use the context menu of my coverflow control in the artboard and ask to edit additional templates and then the ItemTemplate :

I'll work with a Border containing a StackPanel. This StackPanel will itself contain an Image and a Texblock.

Here is how it will look like in Blend after the data binding setup (see further):

I'll also create a small StackPanel under the coverflow StackPanel to show the user mail in a TextBlock.

MVVM

In my project, I use the MVVM (Model-View-ViewModel) pattern for the separation of concerns : http://msdn.microsoft.com/en-us/magazine/dd458800.aspx.

The model for this coverflow will consist of a contact list and a selected contact.

Here is the simple implementation of a contact :

The next step is the creation of the ViewModel . The ViewModel implements the INotifyPropertyChanged for the properties value changes notifications.

By implementing this interface, I must add the PropertyChanged event to my class.

The ViewModel will expose an ObservableCollection of contacts and a single contact representing the selected contact. The ObservableCollection has a built-in notification feature. On the other side, I must notify the client when the selectedContact changes.

The RaisePropertyChanged method body to raise the PropertyChanged event is implemented like this :

Finally, I create a test sample in the constructor of my ViewModel

DataBinding

Once all of that is done, we can come back to the view and setup the databinding. The nice thing with Silverlight 3.0/Blend 3.0 is that we can do almost everything in Blend.

The first thing to allow this ease is to reference the ViewModel in the resources (here inside my usercontrol XAML file) :

After this setup, I can reference the DataContext of my LayoutRoot to this Resource inside Blend.

Then, I'll reference the ItemSource of the coverflow to the contacts ObservableCollection of the ViewModel, once again in Blend.

And finally work like this again for the databinding of my controls. As an example, here is the Blend setup for the Image Data Binding of my coverflow ItemTemplate :