Creating a Context Menu
In Silverlight 2 detecting the right mouse click is not possible using the built-in functionality, this is where javascript comes in. There is a helper class included in the Liquid Controls library 5.1.5 named MousePlus and this enables you to detect right mouse-clicks.
In this example here we build a simple TreeView and add a Popup Menu:
* It is important you have the following set in your Silverlight configuration HTML:
<param name="Windowless" value="true" />.
You need to login to Download the Context Menu example, If you do not have a login you can register for free!
Here is the XAML for this demonstration:
<UserControl x:Class="ContextMenu.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquidTreeView="clr-namespace:Liquid;assembly=Liquid.TreeView"
xmlns:liquidMenu="clr-namespace:Liquid;assembly=Liquid.Menu"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
<liquidTreeView:Tree x:Name="myTreeView" Canvas.Left="10" Canvas.Top="10" Width="200" Height="200" EnableLines="True" SelectionChanged="myTreeView_SelectionChanged">
<liquidTreeView:Node Title="Root" Icon="images/folder.png" IconExpanded="images/folderOpen.png" IsExpanded="True">
<liquidTreeView:Node Title="Item 1" Icon="images/pdf.png" />
<liquidTreeView:Node Title="Item 2" Icon="images/pdf.png" />
<liquidTreeView:Node Title="Item 3" Icon="images/pdf.png" />
<liquidTreeView:Node Title="Item 4" Icon="images/pdf.png" />
<liquidTreeView:Node Title="Item 5" Icon="images/pdf.png" />
</liquidTreeView:Node>
</liquidTreeView:Tree>
<liquidMenu:Menu x:Name="contextMenu" Visibility="Collapsed" ItemSelected="contextMenu_ItemSelected">
<liquidMenu:MenuItem ID="delete" Text="Delete" />
<liquidMenu:MenuDivider />
<liquidMenu:MenuItem ID="moveUp" Text="Move Up" />
<liquidMenu:MenuItem ID="moveDown" Text="Move Down" />
</liquidMenu:Menu>
</Canvas>
</UserControl>
In the XAML we have our TreeView named myTreeView, this has a single Root node and some children. We also have our Popup Context Menu name contextMenu, this contains three options, Delete, Move Up and Move Down. You will see later on in the C# how these actions are handled.
It is important we are using a Canvas as our root element as we need to be able to position the Context Menu using absolute positioning.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Liquid;
using Liquid.Components;
namespace ContextMenu
{
public partial class Page : UserControl
{
private MousePlus _mousePlus = new MousePlus();
private Node _node = null;
public Page()
{
InitializeComponent();
_mousePlus.Setup(myTreeView);
_mousePlus.RightMouseClick += new MousePlusEventHandler(_mousePlus_RightMouseClick);
}
private void _mousePlus_RightMouseClick(object sender, MousePlusEventArgs e)
{
_node = myTreeView.GetNodeAtPoint(e.Position);
if (_node != null)
{
contextMenu.SetValue(Canvas.LeftProperty, e.Position.X);
contextMenu.SetValue(Canvas.TopProperty, e.Position.Y);
contextMenu.Show();
}
}
private void contextMenu_ItemSelected(object sender, MenuEventArgs e)
{
if (e.Tag == null)
{
return;
}
switch (e.Tag.ToString())
{
case "delete":
_node.Delete();
break;
case "moveUp":
_node.SwapPrevious();
break;
case "moveDown":
_node.SwapNext();
break;
}
contextMenu.Hide();
}
private void myTreeView_SelectionChanged(object sender, TreeEventArgs e)
{
contextMenu.Hide();
}
}
}
The C# contains the important stuff here, in the constructor we make a call to the MousePlus.Setup() method, this registers the provided UIElement with the javascript event handler. This means that if there is a right mouse-click detected the mouse coordinates are calculated relative to the UIElement you specify which in this case is the TreeView.
We also attach an event handler to the RightMouseClick event. This works out the node the right-click occured over using the Tree.GetNodeAtPoint() method, we then position the Context Menu and show it.
Handling the menu events is a simple switch ... case block to perform our node editing operations.