Exercise 1: Setting up the User Interface

In this exercise you will add the XAML mark-up to display the new Silverlight-based QuickLaunch. The starter solution is set up only to contain the basic project structure required for this exercise as well as some of the utility code necessary to jump right in and get started.

Task 1 – Preparing

In this task, you will open the starter solution in VS 2010 and explore the environment to understand what has been done to get things set up for the rest of the exercise.

1. Using Visual Studio 2010, open the starter solution named SLNavigation from the <Install>\labs\SilverlightNavigation\source\begin\SLNavigation folder. Solution Explorer should look like this:

   Figure 1

   Solution Explorer

   Notice that there are two projects in this solution:

   1. SLNavigation – this is the actual project that will be deployed to SharePoint. It is an Empty SharePoint Project with a new project item added to it - the SilverlightWebpart1 item just above key.snk in the picture. The SilverlightWebpart1 project item is the Silverlight web part that will display our Silverlight application.
   2. SilverlightApplication1 – this is the Silverlight project in which we will build our Silverlight application. The output of this project is packaged with the output of the SLNavigation project and deployed to SharePoint.
2. Double-click on the Properties node in Solution Explorer underneath the SLNavigation project and then open the SharePoint tab. Notice that the checkbox next to Enable Silverlight debugging is selected. This is necessary if we need to step through our code later on. Close the properties pane.

3. [Optional] If desired, explore the different files in both projects. Notice that some of the code is already included in the starter project. This is all some of the supporting routines for our context menu.

Task 2 – Adding the XAML Markup

1. From Solution Explorer, open the file MainPage.xaml.

2. Add the following XAML markup to the file, inside the existing <Canvas> element

   XAML

   <TextBlock Canvas.Left="0" Canvas.Top="0" Height="23" Name="textBlock1" Text="Silverlight QuickLaunch" FontWeight="Bold" FontSize="12" /> <StackPanel Name="stackPanel1" HorizontalAlignment="Left" Canvas.Top="25" Background="LightBlue" />

   This markup sets up our interface, but if you run the solution now, there will not be anything except the Title visible. This is because the visible navigation elements of our menu are all added dynamically. We will cover that in Exercise 2.

3. To test our interface, hit F5 to test out the solution. After Visual Studio launches the browser, navigate to https://intranet.contoso.com/sites/advanced/SitePages/SilverlightApplication1WebPartPage.aspx.

4. Your page should something like look like this:

   Figure 2

   Silverlight Application

Exercise 1 Verification

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

Verification 1

In this verification, you can compare the anticipated output shown in step 4 with the actual output shown on your screen. If the two match, you have completed the exercise successfully.