Silverlight Menu (Popup)
This free popup Menu control provides Silverlight developers with an easy to use and customizable popup menu system with a familiar default style.
This Silverlight only Menu Control is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design.
If you are developing using Silverlight 4 our tutorials sections contains a demo of the Popup Menu when used in conjunction with the right mouse click event to provide an easy way to implement Silverlight 4 Context Menus.
To use the Menu control you will need to add a reference to Liquid.Menu.dll in your project.
You need to login to Download the Menu example, If you do not have a login you can register for free!
How to Use the Menu Control
To use the Menu on your Silverlight page:
<UserControl x:Class="Menu.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquidMenu="clr-namespace:Liquid;assembly=Liquid.Menu"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
<Button Canvas.Left="20" Canvas.Top="20" Content="Show" Width="60" Height="20" Click="Button_Click" />
<liquidMenu:Menu x:Name="popupMenu" Canvas.Left="40" Canvas.Top="40" ItemSelected="MenuList_ItemSelected" Visibility="Collapsed">
<liquidMenu:MenuItem ID="cut" Icon="images/cut.png" Text="Cut" Shortcut="Ctrl+X" />
<liquidMenu:MenuItem ID="copy" Icon="images/copy.png" Text="Copy" Shortcut="Ctrl+C" />
<liquidMenu:MenuItem ID="paste" Icon="images/paste.png" Text="Paste" Shortcut="Ctrl+V" />
<liquidMenu:MenuDivider />
<liquidMenu:MenuItem ID="new" Text="New">
<liquidMenu:Menu>
<liquidMenu:MenuItem ID="pdf" Icon="images/pdf.png" Text="PDF Document" />
<liquidMenu:MenuItem ID="excel" Icon="images/xls.png" Text="Excel Spreadsheet" />
<liquidMenu:MenuItem ID="word" Icon="images/doc.png" Text="Word Document" />
</liquidMenu:Menu>
</liquidMenu:MenuItem>
</liquidMenu:Menu>
</Canvas>
</UserControl>
Here we have a button which when clicked displays the Menu. The Menu can contain any number of child options and also nested menus. Images and Keyboard shortcuts can also be rendered with the menu title.
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 Menu
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void MenuList_ItemSelected(object sender, MenuEventArgs e)
{
switch (e.Tag.ToString())
{
case "cut":
// TODO: Cut functionality
break;
case "copy":
// TODO: Copy functionality
break;
default:
break;
}
popupMenu.Hide();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
popupMenu.Show();
}
}
}
Using the Menu with Grids
The above solution works fine when working inside a Canvas, however for Grid layouts it will not display correctly. Here is the XAML modified to use the TranslateTransform property in order to position the menu within a Grid.
Further Information
