Silverlight coverflow of Sharepoint contacts : part I

Posted by on Comments (1)

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

Posted in: Blend 3.0 | Silverlight 3.0   Tags:

Enabling offline feature of Silverlight 3 : Home Loan Application V 0.2

Posted by on Comments (1)

It's so easy to enable the offline feature of Silverlight 3 ! J

In Visual Studio, just go to your project properties. In the Silverlight tab, you'll find an "enable running application out of the browser".

If you check the checkbox, the button « Out-of-Brower Settings » will be enabled.

Clicking on this button, you'll find this dialog screen:

This is where you can customize the settings for the offline application:

  • The title, width and height of the windows.
  • The name of the shortcut.
  • A description that will become the comment property of the shortcut (on windows).
  • Different size icons. Pay attention, the icons must be in PNG format.
  • A checkbox to use or not the GPU acceleration.

Here is the resulting OutOfBrowserSettings.xml in the case of my Home Loan Application :

<OutOfBrowserSettings ShortName="Home Loan Calculator" EnableGPUAcceleration="False" ShowInstallMenuItem="True">

<OutOfBrowserSettings.Blurb>HomeLoanCalculator Application on your desktop; at home, at work or on the go.OutOfBrowserSettings.Blurb>

<OutOfBrowserSettings.WindowSettings>

<WindowSettings Title="Home Loan Calculator Application" />

OutOfBrowserSettings.WindowSettings>

<OutOfBrowserSettings.Icons>

<Icon Size="16,16">Images/Icon16.pngIcon>

<Icon Size="32,32">Images/Icon32.pngIcon>

<Icon Size="48,48">Images/Icon48.pngIcon>

<Icon Size="128,128">Images/Icon128.pngIcon>

OutOfBrowserSettings.Icons>

OutOfBrowserSettings>

This file is saved in the Properties folder of my project.

In Blend 3.0 RC, it's also possible to enable the offline feature in this menu path :

Project > Silverlight Project Options > Enable Application Outside Browser

But I don't see where the settings (icons, window title, …) are.

To test the offline feature describe in this post for my Home Loan Application, go there : http://www.renaldnollet.com/samples/HomeLoanSL3V0_2/

See you!

 

Posted in: Blend 3.0 | Silverlight 3.0   Tags:

First look at Blend 3.0 RC : a simple example of the HyperlinkAction behavior

Posted by on Comments (2)

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!

 

Posted in: Blend 3.0   Tags: