Integrating Silverlight with Sharepoint-Building a Silverlight Usercontrol and deploying it in Sharepoint as a Webpart

Well, This is my first post and this is the first I have integrated Silverlight with Sharepoint.All I did is deploying a Silverlight Usercontrol as a webpart in a Sharepoint site.Fine, let me explain the steps involved in performing this.

Requirements:

1.Download and Install the Visual Studio SP1 from here if you do not have it.

2.Download and Install the Microsoft Silverlight 2 tools for Visual STudio SP1 from here.

Steps for creating the Silverlight Application:

1. Open Visual Studio 2008 and click “Creat Project” option and choose Silverlight Application as the project template.

2. Name the project as Sharesilver(its your wish).

3. Replace the code

<Grid x:Name=”LayoutRoot” Background=”White”></Grid>

with follow the follwing code:

<Canvas x:Name=”hi” >

<Canvas.Background>

<LinearGradientBrush StartPoint=”0,0″ EndPoint=”1,1″>

<GradientStop Color=”Aqua” Offset=”0″/>

<GradientStop Color=”Beige” Offset=”0.5″/>

<GradientStop Color=”GreenYellow” Offset=”1″/>

</LinearGradientBrush>

</Canvas.Background>

<TextBlock x:Name=”fn” Height=”88″ Width=”96″ FontWeight=”Bold” FontSize=”20″  Canvas.Left=”54″ Canvas.Top=”74″ Text=”First Name”>

<TextBlock.RenderTransform><RotateTransform Angle=”342″></RotateTransform></TextBlock.RenderTransform>

<TextBlock.Foreground>

<LinearGradientBrush StartPoint=”0,0″ EndPoint=”1,1″>

<GradientStop Color=”Green” Offset=”0″/>

<GradientStop Color=”GreenYellow” Offset=”0.5″/>

<GradientStop Color=”Black” Offset=”1″/>

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

<TextBox x:Name=”fn1″ Canvas.Left=”237″ Canvas.Top=”38″ Width=”115″ Height=”30″>

<TextBox.RenderTransform>

<RotateTransform Angle=”20″></RotateTransform>

</TextBox.RenderTransform>

</TextBox>

<TextBlock x:Name=”sn” Text=”Second Name” Canvas.Left=”61″ Canvas.Top=”114″ Height=”88″ Width=”96″ FontWeight=”Bold” FontSize=”20″>

<TextBlock.RenderTransform>

<RotateTransform Angle=”18″>

</RotateTransform>

</TextBlock.RenderTransform>

<TextBlock.Foreground>

<LinearGradientBrush StartPoint=”0,0″ EndPoint=”1,1″>

<GradientStop Color=”Green” Offset=”0″/>

<GradientStop Color=”GreenYellow” Offset=”0.5″/>

<GradientStop Color=”Black” Offset=”1″/>

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

<TextBox x:Name=”sn1″ Canvas.Left=”230″ Canvas.Top=”158″ Width=”115″ Height=”30″>

<TextBox.RenderTransform>

<RotateTransform Angle=”340″></RotateTransform>

</TextBox.RenderTransform>

</TextBox>

<Button x:Name=”b1″ Canvas.Left=”170″  Canvas.Top=”200″ Content=”Click Here” Width=”115″ Height=”30″ Click=”b1_Click” >

<Button.Background>

<LinearGradientBrush StartPoint=”0,0″ EndPoint=”1,1″>

<GradientStop Color=”RoyalBlue” Offset=”0″/>

<GradientStop Color=”GreenYellow” Offset=”0.5″/>

<GradientStop Color=”Black” Offset=”1″/>

</LinearGradientBrush>

</Button.Background>

</Button>

<TextBlock x:Name=”t1″ Canvas.Top=”250″ Width=”115″ Height=”30″ Text=”hi” Visibility=”Collapsed”>

</TextBlock>

<Canvas.Resources>

<Storyboard x:Name=”s1″>

<DoubleAnimation Storyboard.TargetName=”t1″ Storyboard.TargetProperty=”(Canvas.Left)” From=”0″ To=”400″ By=”20″ Duration=”0:0:1″  RepeatBehavior=”Forever”></DoubleAnimation>

</Storyboard>

</Canvas.Resources>

</Canvas>

<Grid x:Name=”LayoutRoot” Background=”White”>
</Grid>

You will get the output like this:

Untitled

4. Click the Page.xaml.cs file and copy this code snippet below the page constructor:

private void b1_Click(object sender, RoutedEventArgs e)

{

t1.Text = fn1.Text + ” ” + sn1.Text;

t1.Visibility = Visibility;

s1.Begin();

}

5. Build the project.

Steps for deploying the Silverlight Usercontrol in Sharepoint as a webpart in Sharepoint:

1. Open the Sharepoint 3.0 Central Administration.

2. Create a Web application and Site collection with a template of your wish.

3. Now open the Site Collection and and click “View all site content” in the quick launch of the site.

4. The View all site content page opens.Click the “Create” option and the select “Documet Library” in the Libraries category.

5. Create a  Document library called “XAPFiles”.

6. Now, open the folder of the Silverlight application that you created in the Windows Explorer.

7. Open the XAP files document library and upload the XAP file of the Silverlight Application that you created which will be available in the Bin –> Debug  folder of your Silverlight applpication folder.

8. Open the Home page of the Site collection and click on the “SIte Actions” drop down menu option on the top right hand corner of the Site and select  “Edit Page”.

9. The Site now gets opened in the Editable format.Click the “Add a Web Part” option at any of the zones that are available.

10. The Add Web Part dialog box opens.Now, select the “Content Editor Web Part”  Check Box under the Miscellaneous category adn click the Add button.

11. Now the Web Part gets added to the selected zone.Select the “Open the tool pane” option.

12. The tool pane gets opened in the right hand corner.Click the “Source Editor” button.The Source Editor dialog box opens.

13. Open the TestPage.html page of your Silverlight Application which is in the Bin –> Debug  folder in Visual Studio.

14. Copy the <div> element in the Testpage.html and paste it in the Source Editor and make the following 2 changes.

a. Specify the full path of the XAP file which is in the Document Library.For eg. http://servername/Port no./XAPFiles/sharesilver.xap.

b.Change the width and the height property as that of the Silverlight usercontrol that we created in a pixel value.

Here is my TestPage.html:

<div id=”silverlightControlHost”>

<object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”400px” height=”300px”>

<param name=”source” value=”http://servername/Port no./XAPFiles/sharesilver.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&#8243; style=”text-decoration: none;”>

<img src=”http://go.microsoft.com/fwlink/?LinkId=108181&#8243; alt=”Get Microsoft Silverlight” style=”border-style: none”/>

</a>

</object>

<iframe style=’visibility:hidden;height:0;width:0;border:0px’></iframe>

</div>

15. Save it and click OK in the tool pane of the web part.Now the Usercontrol get displayed in the web partthat we created in the site.

Here is the Scree Shot of of my sharepoint site:

Untitled

Advertisements