Customize the Integrated Ribbon UI

• Nov 29, 2023
• 3 minutes to read

This example demonstrates how to use bar customization actions to add, modify or remove elements of the DXRichEdit’s integrated Ribbon UI.

This tutorial consists of the following sections:

• Create a new DXRichEdit Application
• Customize the Integrated Ribbon

Create a new DXRichEdit Application

1. Create a new WPF Application project and open the MainWindow.xaml file in the Visual Studio Designer.

2. Add the RichEditControl object to your project. You can do this by dragging the RichEditControl item from the DX.25.2: Rich Text Editor Toolbox tab to the canvas.

3. Right-click the RichEditControl object and select Layout | Reset All in the context menu. This stretches the RichEditControl to fill the entire window.

Customize the Integrated Ribbon

Add the following XML namespace attributes to the MainWindow.xaml document:

• XAML

xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"

Add the required customization actions to the RichEditControl.RibbonActions collection. The action’s ElementName property specifies the name of the existing ribbon element you wish to change or remove. Element names are fields of the DevExpress.Xpf.RichEdit.DefaultBarItemNames class. You can easily deduce the required element name by following naming rules listed in the table below:

You can perform one of the following actions:

• Remove a Ribbon Element

• Modify a Ribbon Element

• Add a New Ribbon Element

Remove a Ribbon Element

To remove an element from a Ribbon, add a RemoveAction with a specified element name to the RichEditControl.RibbonActions collection.

The action in XAML looks as follows:

• XAML

<dxb:RemoveAction ElementName="{x:Static dxre:DefaultBarItemNames.RibbonItem_File_Info_DocumentProperties}"/>

Modify a Ribbon Element

To change an item’s property , add an UpdateAction, specifying the element’s name (the name is determined as explained previously), the property and a new value, to the RichEditControl.RibbonActions collection. The XAML that selects the View page looks as follows:

• XAML

<dxb:UpdateAction ElementName="{x:Static dxre:DefaultBarItemNames.RibbonPage_View}" PropertyName="IsSelected" Value="True"/>

Add a New Ribbon Element

To add a new element , add an InsertAction to the RichEditControl.RibbonActions collection. The code below adds a new group “Demo” which contains a button “About” to the “View” ribbon page, assigns an image to it and subscribes to the button’s ItemClick event.

• XAML

<dxb:InsertAction Index="2" ContainerName="{x:Static dxre:DefaultBarItemNames.RibbonPage_View}">
    <dxr:RibbonPageGroup Caption="Demo">
        <dxb:BarButtonItem Content="About"
                            LargeGlyph="{dx:DXImageOffice2013 Image=Info_32x32.png}"
                            ItemClick="About_ItemClick"/>
    </dxr:RibbonPageGroup>
</dxb:InsertAction>

See Also

Bar Actions

How to: Customize Context Menus for the Rich Text Editor