Creating a Context Menu
In Silverlight 4 detecting the right mouse click is fairly straight forward using the MouseRightButtonDown event that is available on all UIElement derived objects.
In this example here we build a simple TreeView and add a Popup Menu that allows you to manipulate the ordering of the child nodes:
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="TreeViewContextMenu.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
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" MouseRightButtonDown="myTreeView_MouseRightButtonDown">
<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. It is possible to add the context menu to a Grid element and use the Margin property instead to control the 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;
namespace TreeViewContextMenu
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void contextMenu_ItemSelected(object sender, MenuEventArgs e)
{
if (e.Tag == null)
{
return;
}
switch (e.Tag.ToString())
{
case "moveUp":
myTreeView.Selected.SwapPrevious();
break;
case "moveDown":
myTreeView.Selected.SwapNext();
break;
}
contextMenu.Hide();
}
private void myTreeView_SelectionChanged(object sender, TreeEventArgs e)
{
contextMenu.Hide();
}
private void myTreeView_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
Point position = e.GetPosition(myTreeView);
Node node = myTreeView.GetNodeAtPoint(position);
if (node != null)
{
Point contextMenuPos = myTreeView.TransformToVisual(myTreeView).Transform(position);
myTreeView.ClearSelected();
myTreeView.SetSelected(node);
contextMenu.SetValue(Canvas.LeftProperty, contextMenuPos.X);
contextMenu.SetValue(Canvas.TopProperty, contextMenuPos.Y);
contextMenu.Show();
}
e.Handled = true;
}
}
}
The C# contains the important stuff here, the myTreeView_MouseRightButtonDown method handles the right-click event on our Tree. In here we use the GetNodeAtPoint() method of the Tree object to retrieve the node under the mouse.
Handling the menu events is a simple switch ... case block to perform our node editing operations.
