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 RichEditMenuTypeComment Specifies a context menu invoked for a comment.
RichEditMenuType.Field RichEditMenuTypeField Specifies a context menu invoked for a field.
RichEditMenuType.FloatingObject RichEditMenuTypeFloatingObject Specifies a context menu invoked for a floating object - a picture or a text box.
RichEditMenuType.Footer RichEditMenuTypeFooter Specifies a context menu invoked for a footer.
RichEditMenuType.Header RichEditMenuTypeHeader Specifies a context menu invoked for a header.
RichEditMenuType.Hyperlink RichEditMenuTypeHyperlink Specifies a context menu invoked for a hyperlink.
RichEditMenuType.InlinePicture RichEditMenuTypeInlinePicture Specifies a context menu invoked for an inline picture.
RichEditMenuType.TableCell RichEditMenuTypeTableCell Specifies a context menu invoked for a table cell.
RichEditMenuType.Text RichEditMenuTypeText Specifies a context menu invoked for a text.
RichEditMenuType.Text RichEditMenuTypeText Specifies a context menu invoked for a text.
RichEditMenuType.TextBox RichEditMenuTypeTextBox Specifies a context menu invoked for a text box.
RichEditMenuType.Footnote RichEditMenuTypeFootnote Specifies a context menu invoked for a footnote.
RichEditMenuType.Endnote RichEditMenuTypeEndnote Specifies a context menu invoked for an endnote.

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.

View Example

<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.