Feed Icon  

Contact

  • Bryant Likes
  • Send mail to the author(s) E-mail
  • twitter
  • View Bryant Likes's profile on LinkedIn
  • del.icio.us
Get Microsoft Silverlight
by clicking "Install Microsoft Silverlight" you accept the
Silverlight license agreement

Hosting By

Hot Topics

Tags

Open Source Projects

Archives

Ads

Getting Started With Silverlight and SharePoint 2010

Posted in SharePoint | Silverlight at Monday, January 18, 2010 10:06 AM Pacific Standard Time

One of the cool features of SharePoint 2010 (currently in beta) is that you can set it up on a Windows 7 machine. This means that as a SharePoint developer you no longer have to run a Server OS.

To get started I downloaded the SharePoint 2010 Foundations beta from here. You will also need Visual Studio 2010 which you can download from here.

To setup SharePoint 2010 on Windows 7 you need to follow this guide which explains how to configure the setup process to run on Windows 7 (it is only one change to an xml file).

Make sure you install all the prerequisites which I won’t list here (they are listed in the guide). It will still install even if you don’t, but you will get errors when you try to configure SharePoint (voice of experience here).

Once you have everything installed and have completed the configuration tool, your site should come up in the browser! Now you can start working with Silverlight and SharePoint.

image

Tip: Install the SQL Service Manager so that you can turn SQL Server off when you’re not doing SharePoint development. 

A some great resources for getting started with Silverlight and SharePoint 2010 are the PDC sessions which you can watch for free:

For this example we will primarily be utilizing the information in the first session by Paul Stubbs. With SharePoint 2010, Silverlight can live just about anywhere in the user interface, but this example will be geared toward how simple it is to publish a Silverlight application to a SharePoint site and use it in a web part.

Fire up Visual Studio 2010 and create a new Silverlight Application:

image

At the prompt asking you if you want to create a web application to host the Silverlight application uncheck the checkbox. We don’t need to host Silverlight in a separate web app since SharePoint will be the host.

In the Silverlight Application, edit the MainPage.xaml to have the following Xaml:

<Grid x:Name="LayoutRoot" Background="PowderBlue">
    <TextBlock Text="Silverlight In SharePoint" 
               TextWrapping="Wrap" 
               FontSize="56" 
               FontWeight="Bold" />
</Grid>

Now let’s add the SharePoint part of the project. Before we add the SharePoint project though we need to be running Visual Studio as the Administrator. Save your work and close the solution. Then right click the Visual Studio 2010 shortcut and select Run As Administrator. Back in the solution, right click the solution and select Add -> New Project. Select SharePoint –> 2010 as the project type and select an Empty SharePoint Project:

image 

If you aren’t running as an Administrator then Visual Studio will tell you that the project requires elevated permissions in order to run.

The SharePoint customization Wizard dialog will pop up asking if you want to deploy as a sandboxed solution or a farm solution. Leave the sandboxed solution checked and click ok. Next, right click on the SharePoint project in the Solution Explorer and select Add -> New Item. Add a new Module to the project as shown below:

image

Now right click the new Module and select Properties. In the Properties window click in the Project Output References and then click the ellipse button (…). In the Project Output References dialog click the Add button. Expand the deployment location property on the new reference then change the Project Name to the Silverlight project name and the Deployment Type to ElementFile. You should end up with something that looks like this:

image

Next expand the module we created in the SharePoint project and delete the Sample.txt file. Then open the Elements.xml file. Edit the file to include the xap file that will be generated from our Silverlight application:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="SilverlightModule">
    <File Path="SilverlightModule\SilverlightInSharePoint.xap" 
          Url="_catalogs/masterpage/SilverlightInSharePoint.xap" />
  </Module>
</Elements>

At this point your application is ready to be deployed. Right click the SharePoint project and select Set as Startup Project and hit F5. Visual Studio will build and deploy your project to your local SharePoint site and then open it in the browser. However, at this point our Silverlight application isn’t active in any of the pages. Let’s add the Silverlight application as a web part in the default page.

On the SharePoint site click the edit icon then the insert tab, select Web Part, and choose the Silverlight Web Part in the Media and Content category:

image

Click Add and in the Silverlight Web Part dialog enter the value from the Url field in the Elements.xml file but add a leading slash. So for our example we would enter:

/_catalogs/masterpage/SilverlightInSharePoint.xap

The web part will give you a message that it could not download the xap file. You can ignore this message and just click the save icon. You will get the Silverlight application on the web page, but it will look messed up:

image

The problem is the default size for the Silverlight Web Part is 400x300 but our text is bigger than 300. So we need to set the size to be 400x400. Click the drop down arrow on the top right of the web part and select Edit Web Part. In the web part properties dialog set the height of the web part to 400 and set the chrome type to None. Click Ok and you should get a better looking page:

image

Congratulations! You’ve now gotten started with Silverlight 3 and SharePoint 2010. Silverlight development with SharePoint 2010 is much improved in this new version. Happy SharePointing!