You also need Microsoft Office SharePoint Designer 2007 and Microsoft Visual Studio 2008. SharePoint Designer 2007 is free, and you can download a free trial of Visual Studio 2008:

Microsoft Office SharePoint Designer 2007

Microsoft Visual Studio 2008 Free Trial

Lastly, these instructions assume the Silverlight SDK and the Microsoft Silverlight Tools for Visual Studio 2008 are both installed on your machine. If not, installing the Tools for Visual Studio 2008 will also install the SDK and can be found here:

Microsoft Silverlight Tools for Visual Studio 2008

Scenario

Our scenario is an IT consulting company with several consultants, each of whom have a different skill set. We want to build a simple Silverlight-based web part that shows all the consultants, their managers, and their skill sets.

Instructions

The following instructions walk through creating a custom Silverlight control that integrates with SharePoint Online and then explains how to deploy that Silverlight control to the SharePoint Online environment. If you have an existing Silverlight control you want to deploy then you can jump ahead to the Deploy Silverlight Control section.

Add a list to your site collection

For this example, you will need to create a new list in your SharePoint site. Name this list SkillsAvailable and give it the following columns and configuration:

Now populate the list with some data so the Silverlight control we’re building has data to display.

Create a Silverlight control

1.    Sign into the Microsoft Online Services Single Sign In client, using an account with full control or higher permissions for the site collection you will be using. (If you are not signed in to Microsoft Online Services via the Single Sign In client, then you will be prompted for credentials many times throughout the process.)

2.    Start Visual Studio 2008.

3.    Create a New Silverlight Project called SilverlightExample.

4.    If it’s not already open, open Page.xaml and choose the XAML tab at the bottom.

5.    Add the following to Page.xaml between the <Grid> tags:

<ListBox x:Name="_list" ItemsSource="{Binding Mode=OneWay}" >

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel>

                        <TextBlock  Text="{Binding Skill}"/>

                        <TextBlock  Text="{Binding Name}"/>

                        <TextBlock  Text="{Binding Manager}"/>

                    </StackPanel>

                </DataTemplate>

            </ListBox.ItemTemplate>

      </ListBox>

6.    Add a Service Reference to SharePoint lists.asmx.

a.    In the Solution Explorer, right-click on Service References, and click Add Service Reference.

b.    In the Address box, type the address for the list web service.
(i.e., https://1.sharepoint.microsoftonline.com/_vti_bin/lists.asmx?wsdl)

c.    Click OK.

7.    Open Page.xaml.cs

8.    Replace the code in Page.xaml.cs with the following:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Xml.Linq;

using System.ServiceModel;

using PDCSilverlight.ServiceReference1;

namespace PDCSilverlight

{

    public partial class Page : UserControl

    {

        public Page()

        {

           InitializeComponent();

               ListsSoapClient proxy = new ListsSoapClient();//binding,new EndpointAddress("https://contosoconsulting1microsoftonlinecom-1.sharepoint.microsoftonline.com/_vti_bin/Lists.asmx"));

            proxy.GetListItemsCompleted += new EventHandler<GetListItemsCompletedEventArgs>(proxy_GetListItemsCompleted);

            XDocument  doc = XDocument.Parse("<Document><Query /><ViewFields /><QueryOptions /></Document>");

            XElement query = doc.Element("Query");

            XElement viewFields = doc.Element("ViewFields");

            XElement queryOptions = doc.Element("QueryOptions");

            proxy.GetListItemsAsync("SkillsAvailable", "",

                                    query,

                                    viewFields,

                                    "150",

                                    queryOptions,

                                    "");

        }

        void proxy_GetListItemsCompleted(object sender, GetListItemsCompletedEventArgs e)

        {

            XElement result = e.Result;

            var skills = from x in result.Elements().First().Elements()

                         select new ListResult { Name  = x.Attribute("ows_Skill").Value , Skill = x.Attribute("ows_Developer_x0020_Alias").Value ,Manager = x.Attribute("ows_Product_x0020_Manager_x0020_Alia").Value };

            _list.DataContext = skills;

        }

    }

public class ListResult

    {

        public string Skill { get; set; }

        public string Name { get; set; }

        public string Manager { get; set; }

    }

}

9.    Build the solution (Press F6)

Note: You can’t debug this solution in Visual Studio because of a cross-domain security restriction within Silverlight.

Deploy Silverlight control

1.    Open SharePoint Designer.

2.    Upload your Silverlight control to the root of your site collection.

a.    Click File, then click Import, then click File.

b.    Click Add File.

c.    Browse to the .xap file for your Silverlight solution. It will be in the bin directory for your solution.

Note: If you don’t have SharePoint Designe,r you can map a network drive to the URL of your site collection (i.e., https://1.sharepoint.microsoftonline.com) and upload the file using Windows Explorer.

3.    Open your site collection in a Web browser.

4.    Navigate to any page containing web parts.

5.    Click Site Actions, and then click Edit Page.

6.    Click Add a Web Part in any of the web part zones.

7.    Click the check box next to Content Editor Web Part.

8.    Click Add.

9.    In the newly created Content Editor Web Part, click Edit and then click Modify Shared Web Part.

10. Click the Source Editor button

11. Paste in the following:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="400" height="400">

                        <param name="source" value="SilverlightExample.xap"/>

                        <param name="onerror" value="onSilverlightError" />

                        <param name="background" value="white" />

                        <param name="minRuntimeVersion" value="2.0.31005.0" />

                        <param name="autoUpgrade" value="true" />

                        <a href="http://go.microsoft.com/fwlink/?LinkID=124807" mce_href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text

decoration: none;">

                        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" mce_src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get

Microsoft Silverlight" style="border-style: none"/>

                        </a>

            </object>

12. Click Save.

13. Click OK.

14. Click Exit Edit Mode.

You should now see a simple Silverlight control on the page listing names, skills and managers.

Additional Resources