Good news for RIA lovers : Silverlight is now really present in Sharepoint 2010!

Here is the message you may read if you go to the menu "More Options" of the Site Actions menu if you don't have Silverlight installed.

That doesn't mean that you can't do anything but here is how the options dialog looks like :

If you install the Silverlight plug-in, here is the new look of this dialog :

It's hard to show with a snapshot but this new presentation is really nice, with small animations and fluent navigation.

More than that, Microsoft added a new Silverlight Web Part. It has never been so easy to run a Silverlight application inside Sharepoint.

To use this Web Part, simply edit a Web Part page and add a new Web Part.

In the categories, choose Media and Content and then the Silverlight Web Part :

A new dialog will then appear asking for the silverlight XAP URL :

Enter the URL of a XAP (hosted in a document library, in the 14\TEMPLATE\LAYOUTS folder or anywhere else). In my case, I'll reuse a Silverlight XAP hosted in the IIS hosting my blog.

Here is the result :

Of course, you can modify the URL, appearance, layout and other stuffs in the editor part.

If time permits, I'll write another post about the new Client Object Model an how to use it in a Silverlight application.

Here is the second part for my Silverlight Sharepoint contacts coverflow!

In the first part, I created the Silverlight coverflow without any link to Sharepoint.

In this second part, I'll customize my Sharepoint to allow this link.

Here is my updated TOC :

In my previous post :

1. Implement the Silverlight coverflow

In this post post :

1. Customize a sharepoint contacts library

In a next post :

3.    Implement the Sharepoint contacts extraction

4.    Deploy the XAP in Sharepoint

5.    Add the Silverlight application to a Sharepoint page

Customize a sharepoint contacts library

To customize a contacts library, I need, of course, a contact list and a pictures library for the pictures of contacts.

Here is my contact library :

And here is my pictures library :

Now, I must create a column in my contacts list to add a picture to each contact item :

For each contact, I can then add a picture link to the picture library :

And finally, here is the result :

That's all for this time! I guess those steps were easily made if you've already played with Sharepoint!

See you later!

Yes, there will be a Silverlight Webpart in Sharepoint 2010.

This is announced there : http://sharepoint.microsoft.com/2010/Sneak_Peek/Pages/default.aspx

By the way, a lot of other Sharepoint 2010 stuffs are previewed there. The root site is : http://sharepoint.microsoft.com/2010/Sneak_Peek/Pages/default.aspx

I don't see any big revolution in this small preview (*the day after* the biggest revolution is in the Sharepoint Object Model available in Silverlight... See a later post!) on the sneak peek site but wait and see…

See you later!

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

In the Application class of Silverlight 3,

We may find about the out-of-browser feature :

• The InstallState enumeration :

   

  

   

• The InstallStateChanged event to intercept a change in the InstallState of an application :

   

  

   

• The InstallState read-only property to get the current InstallState value of the application :

   

  

   

• The IsRunningOutOfBrowser boolean value that indicates whether the application was launched from the out-of-browser state

   

  

   

• The CheckAndDownloadUpdateAsync method is used to check for and download an updated version of the application (http://msdn.microsoft.com/en-us/library/system.windows.application.checkanddownloadupdateasync(VS.95).aspx)

   

  

   

• The CheckAndDownloadUpdateCompleted event is raised when the application has finished checking for an update (cfr the CheckAndDownloadUpdateAsync method)

   

  

   

• The Install method is called when you want to install the application out of the browser.

   

  

See you later!

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!

Silverlight 2 offered nice possibilities around data binding.

But one useful feature was missing: the binding of a UI element property to a property of another UI element.

Fortunately, this is now possible with Silverlight 3.

The simplest example to build is the binding of the Text property of a TextBlock to the Value of a Slider:

In this sample, the user may vary the amount he wants to loan using a Slider. This amount is displayed in the TextBlock above the slider.

Here is the corresponding XAML:

<TextBlock Margin="0" TextWrapping="Wrap" Text="{Binding Value, ElementName=Amount, Mode=OneWay}" Foreground="White" FontFamily="Franklin Gothic Heavy" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center"/>

<Slider ValueChanged="Amount_ValueChanged" Minimum="5000" Maximum="500000" x:Name="Amount" Cursor="Hand" SmallChange="5000" LargeChange="10000" Margin="0" Value="200000"/>

To see this application in action: http://www.renaldnollet.com/samples/HomeLoanSL3V0_1/

See you later!

If you try the new Silverlight 3 tools for Visual Studio 2008, you should be frustrated (or happy?) while not finding anymore your Silverlight preview.

This one is just… hidden! J

If you go to the bottom of the XAML page, you can drap up the XAML page and you'll discover the designer.

Accordingly to this message on the Tim Heuer's blog, it should be more than just hidden:

Where did my design view go?!  You may notice right away that the VS tools no longer have the preview mode for your XAML in Silverlight projects.  This is by design.  We heard some pretty vocal feedback that the preview was usually turned off for most development because it was not turning out to be helpful as the applications got more complex.  The team decided put the resource investment into creating a great editable design surface in VS2010 instead and not delay the release of Silverlight 3.

See you later!