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>
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>
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;
}
| 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. |
DropDownPlacement
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>
