Placement

The RadContextMenu exposes a set of properties, which allow you to specify the location, on which it will appear.

Placement

The placement property allows you to specify the position of the RadContextMenu relatively to the target element or the value of the PlacementRect. It has the following values.

  • Absolute - positions the RadContextMenu absolutely.

  • Bottom - displays the RadContextMenu below the target control or the rect.

  • Center - displays the RadContextMenu in the center of the target control or the rect.

  • Left - displays the RadContextMenu on the left of the target control or the rect.

  • Right - displays the RadContextMenu on the right of the target control or the rect.

  • Top - displays the RadContextMenu above the target control or the rect.

Here is an example:

<TextBox x:Name="InputBox" 
         Width="200" 
         VerticalAlignment="Top"> 
    <telerik:RadContextMenu.ContextMenu> 
        <telerik:RadContextMenu x:Name="radContextMenu" 
                                Placement="Bottom"> 
            ... 
        </telerik:RadContextMenu> 
    </telerik:RadContextMenu.ContextMenu> 
</TextBox> 

Silverlight RadContextMenu with Placement Bottom

PlacementRectangle

The PlacementRectangle is of type Rect and specifies the position of the RadContextMenu. It can be combined with the Placement property.

Properties of type Rect cannot be declared in-line because this is not supported. Set the property as attribute by passing the x, y, width and height parameters. The type converter will handle them from there.

<TextBox x:Name="InputBox1" 
 Width="200" 
 VerticalAlignment="Top"> 
    <telerik:RadContextMenu.ContextMenu> 
        <telerik:RadContextMenu x:Name="radContextMenu1" 
                                Placement="Bottom" 
                                PlacementRectangle="0,0,100,100"> 
            ... 
        </telerik:RadContextMenu> 
    </telerik:RadContextMenu.ContextMenu> 
</TextBox> 

Silverlight RadContextMenu with Placement Rectangle

PlacementTarget

The PlacementTarget property is used when the RadContextMenu should be displayed on a position related to a different UI element (not the one attached to).

If you are using the same RadContextMenu for multiple elements and you want to open it from the code behind, it is mandatory to set the PlacementTarget.

public Default_Cs() 
{ 
    InitializeComponent(); 
    this.radContextMenu.PlacementTarget = this.InputBox; 
    this.radContextMenu.IsOpen = true; 
} 

Silverlight RadContextMenu with Placement Target

Placement Placement Target Target Area Context Menu Target Point Context Menu Alignment Point
Absolute Not applicable. PlacementTarget is ignored. The screen, or PlacementRectangle if it is set. The PlacementRectangle is relative to the screen. The top-left corner of the target area. The top-left corner of the RadContextMenu.
AbsolutePoint Not applicable. PlacementTarget is ignored. The screen, or PlacementRectangle if it is set. The PlacementRectangle is relative to the screen. The top-left corner of the target area. The top-left corner of the RadContextMenu.
Bottom PlacementTarget or parent. The target object, or PlacementRectangle if it is set. The PlacementRectangle is relative to the target object. The bottom-left corner of the target area. The top-left corner of the RadContextMenu.
Center PlacementTarget or parent. The target object, or PlacementRectangle if it is set. The PlacementRectangle is relative to the target object. The center of the target area. The center of the RadContextMenu.
Left PlacementTarget or parent. The target object, or PlacementRectangle if it is set. The PlacementRectangle is relative to the target object. The top-left corner of the target area. The top-right corner of the RadContextMenu.
Mouse Not applicable. PlacementTarget is ignored. The bounds of the mouse pointer. PlacementRectangle is ignored. The bottom-left corner of the target area. The top-left corner of the RadContextMenu.
MousePoint Not applicable. PlacementTarget is ignored. The bounds of the mouse pointer. PlacementRectangle is ignored. The top-left corner of the target area. The top-left corner of the RadContextMenu.
Relative PlacementTarget or parent. The target object, or PlacementRectangle if it is set. The PlacementRectangle is relative to the target object. The top-left corner of the target area. The top-left corner of the RadContextMenu.
RelativePoint PlacementTarget or parent. The target object, or PlacementRectangle if it is set. The PlacementRectangle is relative to the target object. The top-left corner of the target area. The top-left corner of the RadContextMenu.
Right PlacementTarget or parent. The target object, or PlacementRectangle if it is set. The PlacementRectangle is relative to the target object. The top-right corner of the target area. The top-left corner of the RadContextMenu.
Top PlacementTarget or parent. The target object, or PlacementRectangle if it is set. The PlacementRectangle is relative to the target object. The top-left corner of the target area. The bottom-left corner of the RadContextMenu.

If there are any sub-menus in the RadContextMenu their dropdown position can be specified through the DropDownPlacement property of the RadMenuItem. It has the following values:

  • Auto - positions the dropdown of the sub-menu automatically.

  • Bottom - displays the nested RadMenuItems below the parent RadMenuItem.

  • Left - displays the nested RadMenuItems on the left of the parent RadMenuItem.

  • Right - displays the nested RadMenuItems on the right of the parent RadMenuItem.

  • Top - displays the nested RadMenuItems above the parent RadMenuItem.

Here is an example:

<TextBox x:Name="InputBox2" 
         Width="200" 
         VerticalAlignment="Top"> 
    <telerik:RadContextMenu.ContextMenu> 
        <telerik:RadContextMenu x:Name="radContextMenu2"> 
            ... 
            <telerik:RadMenuItem Header="Sub Menu" DropDownPlacement="Right"> 
                <telerik:RadMenuItem Header="Item 1" /> 
                <telerik:RadMenuItem Header="Item 2" /> 
            </telerik:RadMenuItem> 
            ... 
        </telerik:RadContextMenu> 
    </telerik:RadContextMenu.ContextMenu> 
</TextBox> 

Silverlight RadContextMenu with Menu Item DropDownPlacement

See Also

In this article