Exercise 2: Showing the QuickLaunch Items

This exercise walks you through the process of adding managed Silverlight code to our Silverlight application to retrieve the items form the QuickLaunch and display them in expandable sections.

Task 1 – Reading and Displaying QuickLaunch Items

1. In this task, you will write code in Silverlight to attach a managed code event handler to an HTML button declared in the HTML DOM. When the button is clicked, the managed code will execute.
2. If it is still open, close the browser used in Exercise 1

3. In Visual Studio 2010, open the file MainPage.xaml.cs and position your cursor on line 47 and add the following code:

   C#

   private void Init() { UrlBase= new Uri(pageUrl).GetComponents(UriComponents.SchemeAndServer, UriFormat.Unescaped).ToString(); ctx = ClientContext.Current; _web = ctx.Web; ctx.Load(_web); myNav = _web.Navigation.QuickLaunch; ctx.Load(myNav); ctx.ExecuteQueryAsync(OnSuccess, OnFailure); }

   This code established some objects and initializes some variables we will use throughout this exercise. Notice the myNav = _web.Navigation.QuickLaunch line in the middle of the snippet. This is the line that retrieves the collection of navigation nodes that are part of the QuickLaunch navigation for this site. Notice, too, the ctx = ClientContext.Current line. This is responsible for setting up our connection to the SharePoint context for the current request. By referencing ClientContext.Current, we can ensure that this webpart will work in any SharePoint site without having to hardcode a Url.

4. Position your cursor on line 59, just below the Init method and hit <Enter>. Type the following code:

   C#

   private void OnSuccess(object sender, ClientRequestSucceededEventArgs args) { NumNodes = myNav.Count; siteUrl = UrlBase + _web.ServerRelativeUrl; ProcessNode(); }

   This code is called if our call to ExecuteQueryAsynch succeeds. It sets up a few variables and then calls the ProcessNodes method.

5. Position your cursor on line 66, just below the OnSuccess method and hit <Enter>. Enter the following code:

   C#

   private void ProcessNode() { Dispatcher.BeginInvoke(() => { currentNode++; if (currentNode < NumNodes) { NavigationNode node = myNav[currentNode]; ctx.Load(node); expando = new Expander() { Header = node.Title }; children = node.Children; ctx.Load(children); ctx.ExecuteQueryAsync(OnReadChildrenSuccess, OnFailure); } }); }

   This code is broken out from the OnSuccess method to facilitate recursive calls so that we can walk the hierarchy of NavigationNodes on the QuickLaunch. It creates a new Expander control (in the global expando variable), sets its header property to show the group title and then sets up the callback for iterating the Children property to retrieve the actual links to be displayed.

6. Position your cursor on line 85, after the Process Nodes method, and hit <Enter>. Add the following code:

   C#

   private void OnReadChildrenSuccess(object sender, ClientRequestSucceededEventArgs args) { Dispatcher.BeginInvoke(() => { HyperlinkButton link; StackPanel expStack = new StackPanel() { Name = NamePrefix + currentNode.ToString() }; string Url; foreach (NavigationNode childNode in children) { Url = UrlBase + childNode.Url; link = new HyperlinkButton(){ Content = childNode.Title, NavigateUri = new Uri(Url)}; link.MouseRightButtonDown += new MouseButtonEventHandler(link_MouseRightButtonDown); expStack.Children.Add(link); } if (expStack.Children.Count > 0) { expando.Content = expStack; stackPanel1.Children.Add(expando); } }); ProcessNode(); }

   This code is called if the ExecuteQueryAsynch call in the ProcessNodes method is successful. It creates a new StackPanel that will hold each of the links in the current Expander and then iterates through the now-populated children collection. For each item in the collection, it creates a new HyperlinkButton, sets its Content and NavigateUrl properties and then adds it to the StackPanel. When the iterations are complete, it the StackPanel contains controls, the StackPanel is added to the current Expander and the Expander is added to the StackPanel that is already in our MainPage.xaml. Finally, this code calls ProcessNodes to continue looping through the top-level nodes of the QuickLaunch.

7. This completes the coding for this Task. Before running the code, you will need to uncomment the call to the Init method on line 43. Hit F5 to test out the solution. After Visual Studio launches the browser, navigate to https://intranet.contoso.com/sites/advanced/SitePages/SilverlightApplication1WebPartPage.aspx.

8. Your page should something like look like this:

   Figure 3

   Silverlight Application

9. You can click on the links to navigate to different lists, and experiment with expanding and collapsing the Expander controls.

Exercise 2 Verification

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

Verification 1

In this verification, you can compare the anticipated output shown in step 6 with the actual output shown on your screen. If your screen shows a similar view, you have completed the exercise successfully.