At a recent SharePoint architects meeting at Microsoft, Tony & Tony from Acentium demonstrated some Silverlight integration with SharePoint. This inspired me to see how easy it would be to use Silverlight with the ARF framework.

Silverlight & XAML

Silverlight uses Xaml to produce the UI and XAML is just XML markup. Using XAML you can create a variety of effects, animations and layouts which can make your website more dynamic.

Silverlight is just an <object> tag in the page and so is really another HTML tag, just like any other. This can easily be added to the SharePoint page, either in the page layout or dynamically by another control.

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="48">
    <param name="source" value="/_layouts/ARF/ARF.Silverlight.App.xap">
    <param name="onerror" value="onSilverlightError">
    <param name="background" value="white">
    <param name="minRuntimeVersion" value="2.0.31005.0">
    <param name="autoUpgrade" value="true">
    <param name="initParams" value="xamlContainerID=idMenu">
    <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none">
    </a>
</object>
<iframe style="visibility:hidden;height:0;width:0;border:0px"> </iframe>

As the ARF framework is based around XML and XSLT it sounded like it fit in very well with Silverlight and XAML.

ARF and XAML

ARF uses XSLT to produce the HTML and so there is no reason why it cannot XAML instead of HTML. By changing the XSLT used by the ARF controls to produce XAML its possible to output the XAML directly in the page. Once its in the page we can get the Silverlight control to dynamically load the XAML and display the results.

In order to achieve this I have added a new control to the ARF deployment. This control is packaged in to a XAP file and deployed to the _layouts folder. This can then be loaded when displaying Silverlight control using ARF. This control can then be rendered by the XSLT along with the XAML which will produce the UI.

Below is an example of a dynamic Silver light menu control.

<param name="initParams" value="xamlContainerID=idMenu"/>
….
<xml id="idMenu" style="display:none">
   <xsl:apply-templates select="Items"/>
</xml>

Here we are passing parameters to the Silverlight control, telling it the ID of the control on the page which contains the XAML. The ARF Silverlight control will look for this ID, load the XAML and display the UI. It will also hookup event handling for any Buttons found in the XAML, allowing them to navigate to the supplied URL.

How it works in ARF

By way of a demonstration I have added some Silverlight navigation to the SPWorks website.

WindowsLiveWriter/SilverlightSharePointandARF_D319/image_thumb_1.png” width=”644″ border=”0″>

The links allow you to turn Silverlight on or off. This is done by using one of the ARF features, the PathManager control.

WindowsLiveWriter/SilverlightSharePointandARF_D319/image_thumb_2.png” width=”132″ align=”right” border=”0″> The PathManager is a special control in ARF as it does not generate and UI or XML, it is just there to modify the path of the XSLT. This allows you to create your layouts using XSL found in the ‘XSL Library’, but then later modify where the XSL is actually loaded from dynamically at runtime.

In the case of the SPWorks website we are using a cookie to store if Silverlight is on or not. The cookie is then used to load the XSL from a different location. The image shows the XSL for Silverlight is contained in a sub-folder of the main ‘XSL Library’.

Using this technique you can easily change the way your site is rendered, just by providing different XSL for the different situations.

The PathManager is fully extendable and so you can provide your own implementation. This way you can switch XSL locations dependant on your own criteria, possibly for different browsers or languages.

To see how the XAML is produced you can download the XSL for the SPWorks navigation.

Also, just for completeness, this could have been achieved another way with ARF. It is possible to get ARF to switch the master page used based upon a cookie value. I could have done this and modified the XSL location directly on the controls in the new master page. In this situation that didn’t seem to be the best solution, but it would have worked just as well.

ARF and its releases

A new release of ARF is available for download containing this new Silverlight control and XAP file. Feel free to use in your own projects as the Silverlight control is not dependant on the ARF framework.

Just a note about the ARF releases. ARF is released as and when new functionality or fixes are added. This way we hope to be able to respond to bugs and feature requests quickly. For each release there will be a WSP and the corresponding source. We recommend that you only use the latest version when starting a new project, when it contains a bug fix that you need or there is new functionality which will help your project.