I’m going to build a Silverlight application that can be hosted from within a SharePoint web part. We will use Visual Studio 2010 to build a simple “Hello World” type application, but add a few touches to make our application configurable.
In SharePoint 2010, we have an out of the box Silverlight web part that can host almost any Silverlight application. For now, we will utilize this built-in web part and later in the series, we will create our own web part to host our applications.
The Silverlight application in this example asks the user to enter 3 words. The words can also be configured through the Properties of the web part. These words will be passed to the Silverlight application, which will render these words in an animated way.
Developing a Simple Silverlight application
You can create a simple Silverlight 4 application using Visual Studio 2010. If you need more complex design you will need tools like Microsoft Expression Blend, but the sample Silverlight application for this article can easily be build in Visual Studio 2010 using the Silverlight Application template.When creating a Silverlight application with Visual Studio 2010, you will be asked which version of Silverlight application you want to design. For this sample I selected Silverlight 4. You can also indicate whether you want to create a test web site or not. As the sample needs to communicate with SharePoint, it cannot be easily tested running outside the SharePoint context, so I choose not to host the Silverlight application in a web site.
When a Silverlight application is created, the following parts are automatically added to the project:
| App.xaml | The App.xaml file is typically used to declare resources that can be used throughout the application. These resources consist of brushes, styles and animations. |
| App.xaml.cs | The App.xaml.cs file is the code behind file for the App.xaml and can be used to handle application level events. There is already a method stub for the Application_Startup, Application_Exit and Application_UnhandledException events available. When the Silverlight application initializes the Application_Startup event is triggered. I typically use this event handler to retrieve the incoming parameters. |
| MainPage.xaml | The MainPage.xaml file is by default the initial UI control. Within this UI control you can start defining the user interface. |
| MainPage.xaml.cs | The MainPage.xaml.cs file is the code behind for the MainPage.xaml. The events generated in the UI control are handled here. You can also dynamically load controls in code behind and consume WCF services, or communicate with SharePoint using the Silverlight Client object model. |
The point of entry of the Silverlight application is the Application_Startup method. The StartupEventArgs argument contains information on how to initialize the Silverlight application. One of these elements is the InitParams dictionary. It can be used to pass information from SharePoint to Silverlight.
The Silverlight application in this sample accepts 3 words that will be rendered using storyboards. The values are stored in static variables that can be accessed form within the different controls that make up the Silverlight application .
public static string Word1 = null; public static string Word2 = null; public static string Word3 = null;
private void Application_Startup(object sender, StartupEventArgs e) { if (e.InitParams != null) { Word1 = GetParam(e.InitParams, "word1"); Word2 = GetParam(e.InitParams, "word2"); Word3 = GetParam(e.InitParams, "word3"); } this.RootVisual = new MainPage(); } private string GetParam(IDictionary<string, string> initParameters, string paramName) { if (initParameters.ContainsKey(paramName)&& ! string.IsNullOrEmpty(initParameters[paramName])) { return initParameters[paramName]; } else return null; }
- a Canvas: this is the root control of the user control.
- 3 TextBox controls: these will be populated with the words passed in
- 3 Storyboard elements: these element are responsible for making the words mover over the screen from bottom to top.
- a Circle which represents the dot of the sentence.
- a fourth Storyboard that will move the dot over the screen as flying comet.
private void StartAnimation() { Word1TextBlock.Visibility = Visibility.Visible; Storyboard sb = (Storyboard)this.FindName("MoveWord1"); if (sb != null) sb.Begin(); } private void MoveWord1_Completed(object sender, EventArgs e) { Word2TextBlock.Visibility = Visibility.Visible; Storyboard sb = (Storyboard)this.FindName("MoveWord2"); if (sb != null) sb.Begin(); }
The Silverlight Web Part
Now it is time to deploy the Silverlight application to SharePoint. The easiest way is to upload the .xap file to a document library. In this demo I’ll upload it to a document library with the name XAPS. SharePoint 2010 comes with an out of the box Silverlight web part. You can add this web part to any SharePoint page and host your Silverlight application from within it. You can add this web part to for example the home page. When in the Web Part Gallery, you can find the Silverlight web part in the Media and Content category.
When you choose to add a Silverlight web part to your page, a dialog pops up asking you to enter the location of your Silverlight application.
In the editor part of the web part you can enter the initParams string requested by your Silverlight application. In this sample you have to pass the name of the list where the service offerings are stored. Scroll down in the editor part and expand the Other Settings section. There you can enter your initialization parameters. If you have a parameter to pass, you have to specify the name of the parameter followed by an equal sign and the value:
param1=value1If you have more than one parameter to pass, you’ll have to separate them with a comma:
param1=value1,param2=value2Pay attention not to add spaces in between. The maximum length of this string is 255 characters. If you need to pass more data, you’ll have to use a workaround. These workarounds will be explained in further articles of this series.
Our parameter string exists of 3 words:
The initialization parameters are passed to the Silverlight application as a comma separated string but inside the Silverlight application it comes in as a dictionary as a property of the StartupEventArgs argument of the Application_Startup method.
Once you set the initialization parameters you can click the OK button of the web part. The Silverlight application will rendered on the page.
If your Silverlight application doesn’t show on the page, it is possible you have typed an error in the path to the Silverlight application, you can always correct by editing the web part and clicking the Configure button in the Properties pane.
