Tuesday, July 7, 2009

WPF RichText Editor with Slider Formatting and a Font Style Dialog



Many projects are essentially finished components that can be added to your existing project with just a little work. Be forewarned, this submission is more like a messy lab experiment. I'm trying to figure out how to use WPF to make richtext document formatting easier. We have new WPF tools. How do we leverage these tools to make the user experience more productive? Unless you are a strong WPF coder, I would not recommend implementing this code in your project until it is a more mature piece of work.


One of my pet peeves when it comes to richtext editors is the need to continually move the mouse back and forth between the menu/toolbar and the editor window during formatting. This sample editor experiments with slider controls and a font/color combobox in an effort to simplify the document layout process.

From a programming standpoint, this project makes heavy use of Josh Smith’s WPF drag-n-drop program (see credits), custom controls, and observablecollections. There are two main windows: the RichText editor and a fontstyle dialog. I have purposely left out several desirable features in the editor to keep the focus on the main design goals. The code is heavily documented and assumes that the reader is somewhat new to WPF.

The text ruler with its sliders automatically applies layout changes to the paragraph that contains the edit carat. Just click on the paragraph and start adjusting the sliders. In WPF, lists (and their listitems) are made up of paragraphs. I ignore paragraph processing for lists and adjust all but the indent slider for every paragraph in the list. When working with lists, the indent slider does nothing. There is no need to establish a selected text range for lists or paragraphs. Font/color changes, on the other hand, are applied to a selected text range.

Technical Keywords

  • Configuration Settings in Apps.Config
  • Listview Drag-n-Drop with System Fonts
  • Regular Expressions
  • Custom WPF Slider Controls
  • WPF Paragraph and List level text formatting in the RichText Editor
  • ListView observablecollections with object based items

Using the Code

The Text Ruler

The text ruler is a simple grid with 5 custom sliders. The ruler image is just a 96 dpi JPEG: ImageSource="Resources\RulerIII.jpg". If you don't like the image I created, just create a 672x42 image (I used GIMP). Put your image into the resources folder and change the ImageSource in the XAML to point to your work of art. Just remember it’s 96 pixels to the inch and the XAML viewport is expecting a 672x42 image. I added 12 pixels to the main grid width to account for the vertical scroll bar in the RichText Editor.

See full detail: http://www.codeproject.com/KB/WPF/WPFRichTextEditor.aspx

No comments: