One of the reasons for replacing the default QuickLaunch navigation control might be a need to increase its usefulness, for example, by adding a context menu that shows up when you right-click on one of the links. This exercise walks you through adding just such a context menu.
Task 1 – Updating the UI
- In this Task, you will add the XAML for the context menu.
- If it is still open, close the browser used in Exercise 2
In Visual Studio 2010, open the file MainPage.xaml and position your cursor at the end of the StackPanel element, on line 21. Hit <Enter> and then add the following code:
<toolkit:ContextMenu Name="popupMenu" Visibility="Collapsed" MouseLeave="popupMenu_MouseLeave" MouseLeftButtonUp="popupMenu_MouseLeftButtonUp"> <toolkit:MenuItem Header="Open in New Window" Name="MenuItemOpenNew" MouseLeftButtonUp="MenuItemOpenNew_MouseLeftButtonUp" /> <toolkit:MenuItem Header="Add New Item" Name="MenuItemNewItem" MouseLeftButtonUp="MenuItemNewItem_MouseLeftButtonUp" /> </toolkit:ContextMenu>
This markup adds the ContextMenu control to our interface. It also sets up a few event handlers that we will add the code for in Task 2. Notice that there are two MenuItems – Open in New Window and Add New Item. These are the options that will be available on our context menu. Each includes an event handler that will respond when the menu item is clicked.
In this Task, you will add the code to show the context menu when a link is clicked and also to perform the action for each menu item. Notice in the starter solution that there is code included to handle many of the pieces required for hiding and showing the context menu – such as hiding the menu when your mouse moves off its control area. Examine this code to see how this functionality was implemented.
- Open the file MainPage.xaml.cs from Solution Explorer.
Position your cursor on line 113 and hit <Enter>. Add the following code:
void link_MouseRightButtonDown(object sender, MouseButtonEventArgs e) { Point p = e.GetPosition(null); Canvas.SetLeft(popupMenu, p.X); Canvas.SetTop(popupMenu, p.Y); Canvas.SetZIndex(popupMenu, 99); if (e.OriginalSource is TextBlock) { popupMenu.Tag = (e.OriginalSource as TextBlock).Text; popupMenu.Visibility = System.Windows.Visibility.Visible; stackPanel1.MouseMove += new MouseEventHandler(stackPanel1_MouseMove); e.Handled = true; } }
This code shows the Context menu control and positions it relative to the position of the mouse when the right button was clicked. The last line, e.Handled = true, tells the Silverlight plugin that the right button click has been handled in our code and so it should not show the default menu:
Figure 4
Silverlight Button
One important part of this lab is the first line inside the if block - popupMenu.Tag = (e.OriginalSource as TextBlock).Text. This line stores the name of the list that the user right-clicked on to show the context menu. This will be used later by the context menu event handlers to make sure that they are operating on the right list.
Position your cursor on line 128 and hit <Enter>. Add the following code:
private void MenuItemOpenNew_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { GetSelectedList(); ctx.ExecuteQueryAsync(OnListUrlQuerySucceed, OnFailure); }
This code is the event handler that responds when the Open in New Window menu item is selected. This handler was registered in the XAML in Task 1. It includes a little bit of Silverlight client object model code to get information about the list the user clicked on to show the context menu.
Position your cursor on line 134 and hit <Enter>. Add the following code:
private void GetSelectedList() { string listName = popupMenu.Tag.ToString(); target = _web.Lists.GetByTitle(listName); ctx.Load(target); }
This code is more Silverlight client object model code to retrieve the appropriate list. It used the Tag property of the Context Menu, which was set back in step 2, to identify the list to retrieve. This code is called out in a separate method because it is used by each menu item’s event handler.
Position your cursor on line 141 and hit <Enter>. Add the following code:
private void OnListUrlQuerySucceed(object sender, ClientRequestSucceededEventArgs args) { Dispatcher.BeginInvoke(() => { HtmlPage.Window.Navigate(new Uri(UrlBase + target.DefaultViewUrl), "_blank"); }); }
This code is called if the ExecuteQueryAsync call from step 3 succeeded. It uses the Silverlight HTMLBridge to cause the browser to navigate to the DefaultViewUrl for the selected list in a new window.
Position your cursor on line 149 and hit <Enter>. Add the following code:
private void MenuItemNewItem_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { GetSelectedList(); ctx.Load(target.Forms); ctx.ExecuteQueryAsync(OnListNewFormQuerySucceed, OnFailure);
This code is the event handler that responds when the Add New Item menu item is selected. This handler was registered in the XAML in Task 1. It includes a little bit of Silverlight client object model code to get information about the list the user clicked on to show the context menu. It makes use of the GetSelectedList method from step 5.
Position your cursor on line 156 and hit <Enter>. Add the following code:
private void OnListNewFormQuerySucceed(object sender, ClientRequestSucceededEventArgs args) { Dispatcher.BeginInvoke(() => { string newFormUrl = target.Forms[NewFormId].ServerRelativeUrl + "?Source=" + pageUrl; HtmlPage.Window.Navigate(new Uri(UrlBase + newFormUrl)); }); }
This code is called if the ExecuteQueryAsync call from step 6 succeeded. It uses the Silverlight HTMLBridge and the NewFormId variable defined in the starter code to cause the browser to navigate to the New Form for the selected list.
- This completes the coding for this Task. Before running the code, you will need to uncomment the rest of the code in the stackPanel1_MouseMove, popupMenu_MouseLeave and popupMenu_MouseLeftButtonUp methods in the starter solution. Hit F5 to test out the solution. After Visual Studio launches the browser, navigate to https://intranet.contoso.com/sites/advanced/SitePages/SilverlightApplication1WebPartPage.aspx.
Your page should something like look like this:
Figure 5
Silverlight Application
Selecting either context menu item will perform the appropriate action.
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 can compare the anticipated output shown in step 8 with the actual output shown on your screen. If your screen shows a similar view, you have completed the exercise successfully.