A common behavior in business applications that have developed through the ages is for a user to be able to get information or execute commands in relation to some information/function displayed by right clicking the object in question and popping up a context menu that offers relevant options to choose.

The Silverlight Toolkit April 2010 release introduced the context menu object.  This can be added to other UI objects and display options for the user to choose.  The menu items can be enabled or disabled as per your application logic and icons can be added to the menu items to add visual effect.  This post will walk you through how to use the context menu object from the Silverlight Toolkit.

Steps:

1. Create a new Silverlight 4 application

2. Copy the following namespace definition to the user control object of the MainPage.xaml file:

xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"  

3. Copy the following XAML into the LayoutRoot grid in MainPage.xaml:

         <Border CornerRadius="15" Background="Blue" Width="400" Height="100">

            <TextBlock Foreground="White" FontSize="20" Text="Context Menu In This Border...." HorizontalAlignment="Center" VerticalAlignment="Center" >

            </TextBlock>

            <my:ContextMenuService.ContextMenu>

                <my:ContextMenu >

                    <my:MenuItem

                Header="Copy"

                Click="CopyMenuItem_Click" Name="copyMenuItem">

                        <my:MenuItem.Icon>

                            <Image Source="copy-icon-small.png"/>

                        </my:MenuItem.Icon>

                    </my:MenuItem>

                    <my:Separator/>

                    <my:MenuItem Name="pasteMenuItem"

                Header="Paste"

                Click="PasteMenuItem_Click">

                        <my:MenuItem.Icon>

                            <Image Source="paste-icon-small.png"/>

                        </my:MenuItem.Icon>

                    </my:MenuItem>

                </my:ContextMenu>

            </my:ContextMenuService.ContextMenu>

        </Border>

The above code associates a context menu with two menu items and a separator between them to the border object.  The menu items has icons associated with them to add visual appeal.  The menu items have click event handlers that will be added in the MainPage.xaml.cs code behind in a later step.

4. Add two icon sized images to the ClientBin directory of the web project hosting the Silverlight application, named copy-icon-small.png and paste-icon-small.jpg respectively.  I used copy and paste icons as the names suggest.

5. Add the following code to the class in MainPage.xaml.cs file:

        private void CopyMenuItem_Click(object sender, RoutedEventArgs e)

        {

            MessageBox.Show("Copy selected");

        }

        private void PasteMenuItem_Click(object sender, RoutedEventArgs e)

        {

            MessageBox.Show("Paste selected");

        }

This code adds the event handlers for the menu items defined in step 3.

6. Run the application, right click on the border and select a menu option and see the appropriate message box displayed.

Congratulations it’s that easy!

Take the Slalom Challenge at www.slalomchallenge.com!