With version 4.0 Silverlight has mouse right button up and down events but still no ContextMenu control. DevComponents.Silverlight.Controls.ContextMenu fills this gap. ContextMenu is an ItemsHostControl. Any type which derives from UIElement can be added to its Items collection and will be displayed. The default container type generated for items which are not UIElement is MenuItem.

Opening and Closing the Popup

ContextMenu.IsOpen determines whether the popup is open. Setting this property to true will result in the context menu opening.

The popup will close automatically when the uses clicks anywhere within the boundaries of the Silverlight application. It is possible to prevent the popup from closing by handling the Closing event and setting the event arguments Handled property to true.

To associate a context menu with a specific UIElement, and have it open when the user right clicks on the element, use the attached dependency property ContextMenu.ContextMenu. For example, the following Xaml creates a context menu and associates it with a Border:

<Border>
    <dc:ContextMenu.ContextMenu>
        <dc:ContextMenu>
            <dc:MenuItem Header="Menu Item 1" />
            <dc:MenuItem Header="Menu Item 2" />
        </dc:ContextMenu>
    </dc:ContextMenu.ContextMenu>
</Border>

The same thing is accomplished in code like so:

ContextMenu contextMenu = new ContextMenu();
contextMenu.Items.Add(new MenuItem { Header = "Menu Item 1" } );
contextMenu.Items.Add(new MenuItem { Header = "Menu Item 1" });
Border border = new Border();
ContextMenu.SetContextMenu(border, contextMenu);

Placement

ContextMenu has several properties which together control the control’s placement when it opens. These include:

  • Placement. A value of type System.Windows.Controls.Primitives.PlacementMode which identifies the popup’s location relative to the placement target. Possible values are Top, Bottom, Left and Right. To make the popup open relative to the current position of the mouse, use PlacementMode.Mouse. Mouse is the default value.
  • PlacementTarget. An object in the Visual Tree which serves as a reference when Placement is any value other than PlacementMode.Mouse.
  • HorizontalOffset.
  • VerticalOffset.

Those familiar with the Context Menu control found in Wpf will be familiar with these properties and how they are used.

One additional property affects the placement of the popup. When a popup opens and its boundaries extend past the border of the hosting window (i.e. the browser), it gets clipped.  To deal with this, ContextMenu can attempt to adjust the position of the popup so that it remains fully within the bounds of the host. The property KeepInBounds determines whether or not this adjustment is performed. The default value is true.

Animation

An animation can be defined which will run when the Context Menu both opens and closes. To define a closing animation, use the ClosingAnimation property. ClosingAnimation is a value of Type DevComponents.Silverlight.Controls.PopupAnimation which exposes properties for the animation Duration, an easing function (System.Windows.Media.Animation.IEasingFunction) and an Effect (DevComponents.Silverlight.Controls.PopupAnimationEffect.) Currently there is one effect available, PopupAnimationEffect.Fade. This information is used to create a Timeline and Storyboard (System.Windows.Media.Animation.Timeline) that begins when the context menu’s IsOpen property is set to false.

Commanding

ContextMenu.Command, if set, is executed when a menu item is clicked and the menu item’s own Command property has not been set.

Related posts:

  1. AutoClosePopup Control
  2. SuperToolTip Control
  3. MenuItem Control
  4. Navigation Pane Quick Start Guide (Silverlight)
  5. ItemsHostControl Control