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:


Implementing a Context Menu

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.

 
Latest Games
Zombie Escape
Apr 19, 2016
Plays: 1,170

Zombie Escape ScreenshotDrive fast before the crazy mutant zombies get you!

6 Ratings/4.1 Average
Car Parking
Jan 16, 2016
Plays: 1,132

Car Parking ScreenshotGuide the car to its parking space in this fun Car Parking game.

1 Rating/5 Average
Trash It
Jan 11, 2016
Plays: 1,073

Trash It ScreenshotAim for the Trash Can and get the various items of Trash in the bin.

4 Ratings/5 Average
Sky Fly
Jan 11, 2016
Plays: 1,188

Sky Fly ScreenshotFly your plane in this colorful vertical scrolling shoot-em-up. Blast the bad guys and collect any bonus's they leave behind.

1 Rating/5 Average
Professor Snappy
Jan 11, 2016
Plays: 853

Professor Snappy ScreenshotPop as many bubbles as possible in this fun and colorful bubble popping game. The levels start off easy enough but gradually get harder!

1 Rating/5 Average
Monster Match Saga
Jan 10, 2016
Plays: 1,152

Monster Match Saga ScreenshotHere we have a bunch of monsters that need to be matched up. Look out for the bomb and spinning monsters that will cause special damage!

3 Ratings/4.6 Average
Fly Bird Fly
Jan 10, 2016
Plays: 900

Fly Bird Fly ScreenshotGuide your friendly Bird through the maze of pipes and other obstacles collecting the Stars in this cool arcade game inspired by the legendary Flappy Bird.

1 Rating/5 Average
Life In One
Jan 10, 2016
Plays: 1,118

Life In One ScreenshotYou are stranded on an Alien planet. Your goal is to build a space rocket and escape. Start by building units to create power and mine the metal patches. Build defenses to defend your base from the advancing Aliens and Zombies!

2 Ratings/3 Average
X Pool
Jan 02, 2016
Plays: 1,520

X Pool ScreenshotPlay Pool against the computer or battle against your friends in the online mode!

2 Ratings/4 Average
Fruit Slicer
Jan 02, 2016
Plays: 834

Fruit Slicer ScreenshotSlice the fruit that is thrown up onto the screen. Slice the fruit into multiple pieces for maximum points!

1 Rating/5 Average