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 :

1. Implement the Silverlight coverflow

In a next post :

1. Customize a sharepoint contacts library
2. Implement the Sharepoint contacts extraction
3. Deploy the XAP in Sharepoint
4. Add the Silverlight application to a Sharepoint page

1. 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 :

A few more things are necessary for this first iteration to work. I won't detail them here.

Download the code for the finished version of this sample: http://cid-a41cdd0007ab3b26.skydrive.live.com/self.aspx/Samples/CoverFlowV1.zip

Next time, we'll train on the Sharepoint side of it.

See you later,

Rénald

Blend 3.0 RC is there and it's pretty exciting to play with this new tool.

Things changed between the March preview and this RC version.

Let's play with a first very simple sample of what we can now do…

Blend 3.0 has a new useful asset library: http://blogs.msdn.com/unnir/archive/2009/05/22/the-blend-3-asset-library.aspx

In my sample, I'll just deal with an image and a textbox :

If I go into my assets library, I can find a behaviors category. That's the place where we'll be able to use all the behaviors available in the assemblies referenced for a project.

If I take the HyperlinkAction behavior and drop it on my picture in the designer, I can see the properties of my behavior.

The Trigger gives information about who can fire which event. The SourceName value [Parent] means here that the event is fired by the picture.

With the piker , you can choose any other element in your artboard.

The type of event is here a MouseLeftButtonDown but many other events may be chosen from the dropdown.

The common properties indicates here where to navigate and in which target window.

Here is the resulting XAML of my picture and HyperlinkAction :

With just 0 line of code and without Visual Studio, I can create links on any Silverlight element using this HyperlinkAction!

See you later!