Lesson 4 - Provide a Bar UI for a Rich Text Editor
- 4 minutes to read
This topic describes how to create a simple word processing application and provide end-users with the capability to perform basic file operations using the bar user interface. From this tutorial, you will learn how to create and delete bar items when working with a RichEditControl.
Tip
A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E2587.
Create Bar Items
- Create a new WPF Application project and open the MainWindow.xaml file in the Visual Studio Designer.
Add the RichEditControl object to your project. You can do this by dragging the RichEditControl item from the DX.18.2: Rich Text Editor Toolbox tab to the canvas.
Right-click the RichEditControl object and select Layout | Reset All in the context menu, or manually set the RichEditControl.HorizontalAlignment and RichEditControl.VerticalAlignment properties to Stretch. This will stretch the RichEditControl to fill the entire window.
After this, your XAML should look like the following (if it does not, you can overwrite your code).
<Window 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" xmlns:local="clr-namespace:WpfApplication1" xmlns:dxre="http://schemas.devexpress.com/winfx/2008/xaml/richedit" x:Class="WpfApplication1.MainWindow" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <dxre:RichEditControl CommandBarStyle="Ribbon"/> </Grid> </Window>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.v18.2.dll
- DevExpress.Mvvm.v18.2.dll
- DevExpress.Office.v18.2.Core.dll
- DevExpress.Pdf.v18.2.dll
- DevExpress.Printing.v18.2.Core.dll
- DevExpress.RichEdit.v18.2.Core.dll
- DevExpress.Images.v18.2.dll
- DevExpress.Xpf.Core.v18.2.dll
- DevExpress.Xpf.Docking.v18.2.dll
- DevExpress.Xpf.DocumentViewer.v18.2.dll
- DevExpress.Xpf.Layout.v18.2.Core.dll
- DevExpress.Xpf.Printing.v18.2.dll
- DevExpress.Xpf.Ribbon.v18.2.dll
- DevExpress.Xpf.RichEdit.v18.2.dll
To add references, right-click the References node in the Solution Explorer and select Add Reference… in the invoked context menu.
Note
Normally, when adding references to these assemblies, you should choose them from the Global Assembly Cache (GAC). However, if you prefer to copy them locally or need to include them later into your product’s installation, you can find their copies in the following directory.
C:\Program Files (x86)\DevExpress 18.2\Components\Bin\Framework\
Remove the integrated Ribbon UI by doing one of the following:
Click the RichEditControl’s smart tag. In the invoked menu, under Integrated Ribbon and Reviewing Pane, select Empty from the CommandBarStyle drop-down list.
- In XAML, set the RichEditControl.CommandBarStyle property to CommandBarStyle.Empty, or simply remove it from the markup.
To create a Bar UI, right-click the RichEditControl in the Visual Studio Designer, and select Create Bars in the invoked context menu. You can add required bars individually by clicking the bidirectional arrow
, selecting the required command bar and subsequently clicking the action Create Bars:. You can select All to add all available command bars at once. For example, create the Common bar, which allows end-users to perform basic file operations such as creating, loading, saving and printing documents, by selecting Create Bars | File in the context menu.
Run the project. The Common bar for the RichEditControl is created.
Note
Commands executed using 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.
Delete Bar Items
If you wish to exclude any item from a bar, you should delete the bar item link from the Bar’s item link collection, and remove the corresponding bar button item from the BarManager’s item collection.
For example, to delete the Open item from the Common bar, do one of the following.
At design time, right-click the corresponding bar button item and select Delete BarButtonItem in the invoked context menu.
Comment or delete the following lines in your XAML file:
Note
A complete sample project is available at https://github.com/DevExpress-Examples/dxrichedit-getting-started-lesson-2-provide-bars-ui-for-a-richeditcontrol-e2587.
<Window.Resources> <dxre:RichEditUICommand x:Key="commands"/> <dxre:RichEditStringIdConverter x:Key="stringIdConverter"/> </Window.Resources> <Grid> <dxb:BarManager x:Name="barManager1" ToolbarGlyphSize="Small"> <dxb:BarManager.Bars> <dxb:Bar x:Name="barCommon" Caption="{Binding ConverterParameter=Caption_GroupCommon, Converter={StaticResource stringIdConverter}, Mode=OneTime, Source={StaticResource stringIdConverter}}"> <dxb:Bar.DockInfo> <dxb:BarDockInfo ContainerType="Top"/> </dxb:Bar.DockInfo> <dxb:Bar.ItemLinks> <dxb:BarButtonItemLink BarItemName="biFileNew"/> <!--<dxb:BarButtonItemLink BarItemName="biFileOpen"/>--> <dxb:BarButtonItemLink BarItemName="biFileSave"/> <dxb:BarButtonItemLink BarItemName="biFileSaveAs"/> <dxb:BarButtonItemLink BarItemName="biFileQuickPrint"/> <dxb:BarButtonItemLink BarItemName="biFilePrint"/> <dxb:BarButtonItemLink BarItemName="biFilePrintPreview"/> <dxb:BarButtonItemLink BarItemName="biEditUndo"/> <dxb:BarButtonItemLink BarItemName="biEditRedo"/> </dxb:Bar.ItemLinks> </dxb:Bar> <dxb:Bar x:Name="barInfo" Caption="{Binding ConverterParameter=Caption_GroupInfo, Converter={StaticResource stringIdConverter}, Mode=OneTime, Source={StaticResource stringIdConverter}}"> <dxb:Bar.DockInfo> <dxb:BarDockInfo ContainerType="Top"/> </dxb:Bar.DockInfo> <dxb:Bar.ItemLinks> <dxb:BarButtonItemLink BarItemName="biFileDocumentProperties"/> </dxb:Bar.ItemLinks> </dxb:Bar> </dxb:BarManager.Bars> <dxb:BarManager.Items> <dxb:BarButtonItem x:Name="biFileNew" Command="{Binding FileNew, Mode=OneTime, Source={StaticResource commands}}"/> <!--<dxb:BarButtonItem x:Name="biFileOpen" Command="{Binding FileOpen, Mode=OneTime, Source={StaticResource commands}}"/>--> <dxb:BarButtonItem x:Name="biFileSave" Command="{Binding FileSave, Mode=OneTime, Source={StaticResource commands}}"/> <dxb:BarButtonItem x:Name="biFileSaveAs" Command="{Binding FileSaveAs, Mode=OneTime, Source={StaticResource commands}}"/> <dxb:BarButtonItem x:Name="biFileQuickPrint" Command="{Binding FileQuickPrint, Mode=OneTime, Source={StaticResource commands}}"/> <dxb:BarButtonItem x:Name="biFilePrint" Command="{Binding FilePrint, Mode=OneTime, Source={StaticResource commands}}"/> <dxb:BarButtonItem x:Name="biFilePrintPreview" Command="{Binding FilePrintPreview, Mode=OneTime, Source={StaticResource commands}}"/> <dxb:BarButtonItem x:Name="biEditUndo" Command="{Binding EditUndo, Mode=OneTime, Source={StaticResource commands}}"/> <dxb:BarButtonItem x:Name="biEditRedo" Command="{Binding EditRedo, Mode=OneTime, Source={StaticResource commands}}"/> <dxb:BarButtonItem x:Name="biFileDocumentProperties" Command="{Binding FileDocumentProperties, Mode=OneTime, Source={StaticResource commands}}"/> </dxb:BarManager.Items> <dxre:RichEditControl x:Name="richEditControl1" CommandBarStyle="Empty" BarManager="{Binding ElementName=barManager1, Mode=OneTime}"/> </dxb:BarManager> </Grid>