Exercise 3: Adding the Silverlight Application to a Master Page

In this exercise you will create a custom master page and add the Silverlight application to it.

Task 1 – Creating the Custom Master Page

1. In this task, you will create a new Master Page to host the custom Silverlight application.
2. Navigate to Start -> All Programs -> SharePoint -> Microsoft SharePoint Designer 2010.
3. In SharePoint Designer 2010, click on Open Site.

4. In the Open Site dialog, enter https://intranet.contoso.com in the Site name: text box and click Open.

   Note:

   If you are prompted for credentials in the Windows Security dialog, enter the administrator credentials you used to log into the virtual machine.

5. Select Navigation -> Site Objects -> Master Pages to display the available master pages.
6. In the Master Pages tab opened in the step above, right-click on the V4.master master page and choose Copy.
7. Right-click in an open space in the Master Pages tab and select Paste to create the new Master Page.
8. Right-click on the Master Page you created in the step above (v4_copy(1).master), select Rename and V4_Banner.master.

Task 2 – Customizing the Master Page

1. In this task, you will add the Silverlight application to the custom Master Page.

2. In SharePoint Designer 2010 click on V4_Banner.master to open the settings page.

   Figure 14

   v4_Banner.master Page

3. Click on the Edit file link in the Customization panel to open the master page in Design view.

4. If prompted to check the file out, click Yes.

   Note:

   By default, the v4_Banner.master page is shown in Split view so that the code is shown in the upper half of the screen and the design in the lower half.

5. Click the Code button to view the code for the Master Page.

   Figure 15

   Code Button

6. Press Ctrl+F to open the Find and Replace dialog, select the Find What: text box, enter PlaceHolderPageDescription and click Find Next. Click Close.

   Figure 16

   Find and Replace dialog box

7. Place your cursor after the </div> tag under the PlaceHolderPageDescription tag and press Enter.

8. Enter the following HTML:

   HTML

   <div class="s4-pagedescription" tabindex="0" > <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="486" height="60"> <param name="source" value="https://intranet.contoso.com/SiteAssets/SL.Banner.Rotator.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="4.0.50401.0" /> <param name="autoUpgrade" value="true" /> <a href="https://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none"> <img src="https://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object> </div>
   Note:

   This markup will place the Silverlight control into the web page via an object tag. The source parameter provides the path to the Silverlight application.

9. Click File -> Save to save your changes.

10. If the Site Definition Page Warning dialog is displayed, click Yes.

    Figure 17

    Site Definition Page Warning

Task 3 – Applying the Custom Master Page

1. In this task, you will apply the custom master page to test your work.
2. Select Navigation -> Site Objects -> Master Pages to display the available master pages.
3. Right-click V4_Silverlight.master and select Set as Default Master Page.

4. When prompted to set the default Master Page, click Yes.

   Figure 18

   Set as Default Master Page dialog box

5. Open https://intranet.contoso.com in Internet Explorer.

6. Notice the Silverlight banner rotator application inserted at the top of the page.

   Figure 19

   Silverlight banner ad rotator application

Exercise 3 Verification

In order to verify that you have correctly performed all steps of exercise 3, proceed as follows:

Verification 1

In this verification, you will browse to the SharePoint site where you applied the v4_Banner.master Master Page and verify it displays the Silverlight application.

1. Open https://intranet.contoso.com in Internet Explorer.

2. Notice the Silverlight banner rotator application inserted at the top of the page.

   Figure 20

   Silverlight banner ad rotator application