Lesson 3 - Create a Simple Word Processor with Ribbon Menu

• May 22, 2020
• 3 minutes to read

TIP

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3313.

To create a simple rich text editor with a bar interface, follow the steps below.

1. Open MS Visual Studio 2010 and create a new Silverlight Application. Add a RichEditControl control (from the DX.14.2: Rich Text Editor toolbox tab) to the page and size it as required.

   

   After this, your XAML should look like the following.

   XAML

   
   <UserControl x:Class="SilverlightApplication1.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       d:DesignHeight="300" d:DesignWidth="400" 
       xmlns:dxre="http://schemas.devexpress.com/winfx/2008/xaml/richedit">
   
       <Grid x:Name="LayoutRoot" Background="White">
           <dxre:RichEditControl Name="richEditControl1"/>
       </Grid>
   </UserControl>
   

   Note that you can add the RichEditControl by overwriting your MainWindow.xaml file with this code without dragging the RichEditControl control to the window. However, in this case, you need to manually add references to the following libraries:

   • DevExpress.Data.v14.2.dll
   • DevExpress.Office.v14.2.Core.dll
   • DevExpress.Printing.v14.2.Core.dll
   • DevExpress.RichEdit.v14.2.Core.dll
   • DevExpress.Xpf.Core.v14.2.dll
   • DevExpress.Xpf.Printing.v14.2.dll
   • DevExpress.Xpf.Printing.v14.2.Core.dll
   • DevExpress.Xpf.Ribbon.v14.2.dll
   • DevExpress.Xpf.RichEdit.v14.2.dll

    

2. Right-click RichEditControl in the Visual Studio designer. In a popup menu that appears, click Create Ribbon Items and select File as shown below.

   

3. The FileRibbon page containing the Common Ribbon page group is created and populated automatically.

   

4. Select another Ribbon page in step 2 to create other pages if required.

5. To leave only required bar items, edit XAML manually. Remove BarButtonItem elements and corresponding BarButtonItemLink elements. For more information on Ribbon UI, see the DXRibbon Fundamentals document.

   If you want to exclude some items from the Ribbon page, you should delete BarButtonItem elements and corresponding BarButtonItemLink elements. For more information on Ribbon UI, see the $Ribbon Fundamentals document.

   For example, you can delete the Browser Print Preview item from the Common Ribbon page group. This command duplicates the functionality of the Print Preview command, if the IRichEditPrintingService service of the RichEditControl is not specified. To remove an unneeded item, do one of the following.

   • At design time, right-click the corresponding bar button item and select Delete from the invoked context menu.

     

   • Comment or delete the following lines in your XAML file.

     XAML

     
     <dxb:BarManager Name="barManager1" ToolbarGlyphSize="Small">
         <dxb:BarManager.Items>
             <!--...-->
             <!-- <dxb:BarButtonItem Command="{Binding Path=FileBrowserPrintPreview, Mode=OneTime, 
     Source={StaticResource commands}}" Name="biFileBrowserPrintPreview" /> -->
             <!--...-->
         </dxb:BarManager.Items>
         <DockPanel>
             <dxr:RibbonControl DockPanel.Dock="Top">
                 <dxr:RibbonDefaultPageCategory>
                        <dxr:RibbonPage Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_PageFile, 
     Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="pageFile">
                                 <dxr:RibbonPageGroup Caption="{Binding Source={StaticResource stringIdConverter}, 
     ConverterParameter=Caption_GroupCommon, Converter={StaticResource stringIdConverter}, Mode=OneTime}" 
     Name="grpCommon" ShowCaptionButton="False">     
                             <!--...-->
                             <!--<dxb:BarButtonItemLink BarItemName="biFileBrowserPrintPreview" />-->
                             <!--...-->
                         </dxr:RibbonPageGroup>
                     </dxr:RibbonPage>
                 </dxr:RibbonDefaultPageCategory>
             </dxr:RibbonControl>
             <!--...-->
         </DockPanel>
     </dxb:BarManager>
     

   

6. Run the application and see the Ribbon interface in action.

   

NOTE

Use the RichEditControl.AssignShortcutKeyToCommand and RichEditControl.RemoveShortcutKey methods to change shortcuts for the RichEdit commands, and the BarItem.KeyGesture property to change shortcuts for bar items.

NOTE

Commands executed via the Bar (Ribbon) user interface can throw unhandled exceptions if a problem occurs. Consider the situation when a document is being saved to a locked or read-only file. To prevent application failure, subscribe to the RichEditControl.UnhandledException event and set the RichEditUnhandledExceptionEventArgs.Handled property to true.