Pop-up Menus
- 2 minutes to read
The Rich Text Editor has several types of context (pop-up) menus which are invoked when the user clicks different visual objects. The RichEditControl provides the RichEditControl.MenuCustomizations property and the RichEditControl.PopupMenuShowing event which allow you to customize context menus by adding or removing items.
Context Menus Overview
Menu Type | Appearance | Description |
---|---|---|
RichEditMenuType.Comment | Specifies a context menu which can be invoked by right-clicking a comment. | |
RichEditMenuType.Field | Specifies a context menu which can be invoked by right-clicking a field. | |
RichEditMenuType.FloatingObject | Specifies a context menu which can be invoked by right-clicking a floating object - a picture or a text box. | |
RichEditMenuType.Footer | Specifies a context menu which can be invoked by right-clicking a footer. | |
RichEditMenuType.Header | Specifies a context menu which can be invoked by right-clicking a header. | |
RichEditMenuType.Hyperlink | Specifies a context menu which can be invoked by right-clicking a hyperlink. | |
RichEditMenuType.InlinePicture | Specifies a context menu which can be invoked by right-clicking an inline picture. | |
RichEditMenuType.TableCell | Specifies a context menu which can be invoked by right-clicking a table cell. | |
RichEditMenuType.Text | Specifies a context menu which can be invoked by right-clicking a text in the document. | |
RichEditMenuType.TextBox | Specifies a context menu which can be invoked by right-clicking inside a text box. |
Customize Context Menus in XAML
This example demonstrates how to use the RichEditMenuCustomization.Customizations property to add custom items to the popup menu of the RichEditControl or remove the existing ones. Use the RichEditMenuCustomization.MenuType property to determine the visual element for which the popup menu is invoked.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-popup-menu-of-the-wpf-richedit-control-t537265.
<dx:DXWindow.Resources>
<dxre:RichEditUICommand x:Key="commands" />
</dx:DXWindow.Resources>
<dxb:BarManager x:Name="barManager1" ToolbarGlyphSize="Small">
<dxb:BarManager.Items>
<dxb:BarButtonItem
x:Name="customSymbol"
Command="{Binding InsertSymbol, Mode=OneTime, Source={StaticResource commands}}"
Content="Insert Symbol" />
<dxb:BarButtonItem
x:Name="customInsertTable"
Command="{Binding InsertTable, Mode=OneTime, Source={StaticResource commands}}"
Content="Insert Table" />
<dxb:BarButtonItem
x:Name="customShowTableGrid"
Command="{Binding TableToggleShowGridlines, Mode=OneTime, Source={StaticResource commands}}"
Content="Show Gridlines" />
<dxb:BarButtonItem
x:Name="customSetAllBorders"
Command="{Binding TableToggleAllBorders, Mode=OneTime, Source={StaticResource commands}}"
Content="All Borders" />
</dxb:BarManager.Items>
<Grid>
<dxre:RichEditControl x:Name="richEdit" CommandBarStyle="Empty" BarManager="{Binding ElementName=barManager1, Mode=OneTime}" PopupMenuShowing="RichEditPopupMenuShowing">
<dxre:RichEditControl.MenuCustomizations>
<dxre:RichEditMenuCustomization>
<dxre:RemoveRichEditCommandAction Id="{x:Static dxrecore:RichEditCommandId.CutSelection}"/>
<dxb:BarButtonItemLink dxb:BarItemLinkActionBase.ItemLinkIndex="0">
<dxb:BarButtonItemLink.BarItemName>
customSymbol
</dxb:BarButtonItemLink.BarItemName>
</dxb:BarButtonItemLink>
<dxb:BarButtonItemLink dxb:BarItemLinkActionBase.ItemLinkIndex="1">
<dxb:BarButtonItemLink.BarItemName>
customInsertTable
</dxb:BarButtonItemLink.BarItemName>
</dxb:BarButtonItemLink>
<dxb:BarItemLinkSeparator dxb:BarItemLinkActionBase.ItemLinkIndex="2"></dxb:BarItemLinkSeparator>
</dxre:RichEditMenuCustomization>
<dxre:RichEditMenuCustomization MenuType="TableCell">
<dxb:BarItemLinkSeparator></dxb:BarItemLinkSeparator>
<dxb:BarButtonItemLink>
<dxb:BarButtonItemLink.BarItemName>
customShowTableGrid
</dxb:BarButtonItemLink.BarItemName>
</dxb:BarButtonItemLink>
<dxb:BarButtonItemLink>
<dxb:BarButtonItemLink.BarItemName>
customSetAllBorders
</dxb:BarButtonItemLink.BarItemName>
</dxb:BarButtonItemLink>
</dxre:RichEditMenuCustomization>
</dxre:RichEditControl.MenuCustomizations>
</dxre:RichEditControl>
</Grid>
</dxb:BarManager>
Customize Context Menus Dynamically
Handle the RichEditControl.PopupMenuShowing event to customize context menus at runtime.