Lesson 2 - Create a Simple Word Processor with Bar Menu

• May 22, 2020
• 2 minutes to read

TIP

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

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 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, expand the Create Bars menu and select the File submenu as shown below.

   

3. The File bar group is created and populated automatically.

   

4. Select another bar group in step 2 to create other bars if required.

5. To position bars in a different manner, use the Bar.DockInfo property. The following XAML specifies a floating bar.

   XAML

   
   <dxb:Bar.DockInfo>
       <dxb:BarDockInfo ContainerType="Floating" />
   </dxb:Bar.DockInfo>
   

   You can also use the technique described in the BarContainerControl topic.

6. To leave only required bar items, edit XAML manually. Remove BarItem and corresponding BarItemLink.
7. Run the application and see the command bar 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.