www.RoomSay.com

HTML5 and CSS3 enabled 3D web experience at roomsay.com:

RoomSay.com 3D Web Experience RoomSay.com 3D Web Experience DIY

Vectorlight News

  • 3D CSS used to Create Website
    Feb 08, 2014

    With the CSS 3D effects being implemented in modern browsers RoomSay.com takes this new technology and enables you to map your traditional 2D content onto the walls of a 3D room.

  • Chat App Converted to HTML and JQuery
    Sep 08, 2011

    Converted from Silverlight to HTML and Javascript/JQuery is the Vectorlight Chat App. Login using your Vectorlight password to chat using your username and avatar.

  • HTML5 iPhone,Android Big Guns Tower Defense
    Jul 02, 2011

    Big Guns has made the leap from Windows Phone 7 (XNA) to HTML5 so you can now play it on your iPhone, Android and other HTML5 compatible devices.

  • HTML5 Games - Word Poppers and Batty
    Jun 04, 2011

    As the take-up of HTML5 quickens (74% of users currently have a browser capable of HTML5 Canvas) we present two more games for both your browser and mobile.

  • Big Guns Tower Defense on Windows Phone 7
    May 06, 2011

    Coming soon to Windows Phone 7 is an XNA port of the popular Vectorlight tower defense game Super Tower Defense. Whilst retaining many of the graphical and gameplay features of the original Silverlight game.

  • Home Page News

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.

Silverlight Popup Menu

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.


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:

<Grid x:Name="LayoutRoot" Background="White">
    <Button Content="Show" Width="60" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20 20 0 0" Click="Button_Click" />
    <liquidMenu:Menu x:Name="popupMenu" HorizontalAlignment="Left" VerticalAlignment="Top" ItemSelected="MenuList_ItemSelected" Visibility="Collapsed">
        <liquidMenu:Menu.RenderTransform>
            <TranslateTransform X="40" Y="40" />
        </liquidMenu:Menu.RenderTransform>

        <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>
</Grid>

Example Silverlight Menu Control:

Silverlight Menu Control

Latest Forum Posts

Here are latest posts from around the forums, if you have a question about any of the Liquid controls you can get your answers in the Forum.

Rate this: 

1 Star 2 Star 3 Star 4 Star 5 Star
55 Ratings / 2.1 Average

Tweets

Silverlight Controls

  • Rich TextBox

    Create and edit rich content with this slick and expandable Rich TextBox...

  • TreeView

    This easy to use TreeView comes with drag and drop, sorting, searching and much more...

  • Context Menu

    You too can have cool popup context menus in your Silverlight applications...

  • Resizable Dialog

    Draggable and resizable popup dialogs are what serious Silverlight developers need...

  • Spell Checker

    Real-time spell checking in Silverlight? We did it first here...