Silverlight 4 ContextMenu using ContextMenuService

17 04 2010

Silverlight 4 now support right click.

Now you can view your own ContextMenu.

Silverlight 4 toolkit have ContextMenu control. You can easily create your own ContextMenu which contains-

-MenuItem with Icon

-Menu Separator

Silverlight 4 Toolkit ContextMenu

You can use Silverlight toolkit ContextMenuService which will handle the event and positioning of the ContextMenu

All you need the reference of the namespace like below:
xmlns:controlsInputToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"

Now you can define the ContextMenuService and the ContextMenu like below:

    <controlsInputToolkit:ContextMenuService.ContextMenu>
        <controlsInputToolkit:ContextMenu
            Height="100"
            Name="contextMenu1"
            Width="200">
            <controlsInputToolkit:MenuItem
                x:Name="MenuItem1"
                Header="MenuItem-1"
                Click="MenuItem1_Click"
                IsEnabled="True">
                <controlsInputToolkit:MenuItem.Icon>
                    <Image
                        Height="25"
                        Width="25"
                        Source="Images/Silverlight.png"></Image>
                </controlsInputToolkit:MenuItem.Icon>
            </controlsInputToolkit:MenuItem>
            <controlsInputToolkit:MenuItem
                x:Name="MenuItem2"
                Header="MenuItem-2"
                Click="MenuItem2_Click"
                IsEnabled="True">
                <controlsInputToolkit:MenuItem.Icon>
                    <Image
                        Height="25"
                        Width="25"
                        Source="Images/Bird.png"></Image>
                </controlsInputToolkit:MenuItem.Icon>
            </controlsInputToolkit:MenuItem>
            <controlsInputToolkit:Separator />
            <controlsInputToolkit:MenuItem
                x:Name="MenuItem3"
                Header="MenuItem-3"
                Click="MenuItem3_Click"
                IsEnabled="True">
                <controlsInputToolkit:MenuItem.Icon>
                    <Image
                        Height="25"
                        Width="25"
                        Source="Images/logo.png"></Image>
                </controlsInputToolkit:MenuItem.Icon>
            </controlsInputToolkit:MenuItem>
        </controlsInputToolkit:ContextMenu>
    </controlsInputToolkit:ContextMenuService.ContextMenu>

In this sample MainPage is considered for right click.
Now in the code behind you need handled the right click down event for the MainPage (Hide the default one)  like below:

    public MainPage()
    {
        InitializeComponent();
        this.MouseRightButtonDown += new MouseButtonEventHandler(MainPage_MouseRightButtonDown);
    }
    void MainPage_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
    {
        e.Handled = true;
    }

View Demo Here
Download Source Here


Actions

Information

One response

21 07 2010
geordie

thanks, first example with separator
contextmenu.show does not seem to be available, i want to launch it with the left mouse button. any ideas would be appreciated

Leave a comment