Silverlight Spell Checker

One of the controls in our Silverlight Elements control suite is the HTML editor. This control gives users a rich text editing experience specific for outputting HTML. The user interaction for this control will be familiar to your users – they can use tool bar buttons to apply formatting to selected text, and navigate the text using the Home, End, Ctrl, Shift, arrow key and mouse combinations. The available formatting options include bold, italic, underline, foreground color, background color, font family, font size, hyperlinks, ordered/unordered lists, left, right, center and justified alignments. Based on customer feature requests, we’ve added built-in spell checking support to this control which your users will love.

Enabling the Spell Checker

To enable the built-in spell checker, simply set the IsSpellCheckingEnabled property of our RichTextEditor to true.

<ms:RichTextEditor x:Name="TextEditor" IsSpellCheckingEnabled="True" />

As the user is editing the text, the well known red squiggly lines appear under any words not found in the dictionary. By default, the United States dictionary will be used for checking the spelling. A UK dictionary is also available which you can use by setting the SpellingDictionary property to UnitedKingdom.

Spell Checker Enabled

Right clicking on a misspelt word will display a context menu of suggestions. The suggestion list is ordered with the most likely correct word at the top. Selecting one of the suggestions will replace the misspelt word.

Context Menu

Spelling Dialog

The HTML editor also comes with a built-in spelling dialog which will be familiar to Microsoft Office users. The dialog lets the user navigate through each misspelt word in the document and either ignore the word, or change it to one of the suggestions. There are also commands for applying changes to all the same misspelt words in the document. The dialog can be opened by pressing the spell check button in the HTML toolbar. By default the button is not displayed, so to display it, simply set the IsSpellCheckButtonVisible property on the StandardRichTextEditorToolBar to true.

<ms:StandardRichTextEditorToolBar Editor="{Binding ElementName=TextEditor}" IsSpellCheckButtonVisible="True" />

Spelling Dialog

More New Features

Here are some other new features in the latest version of the HTML editor that you may be interested in:

  • Tab key support
    By default, the Tab key is used to navigate focus to the next control in the Silverlight application. By setting the RichTextEditor.CanHandleTabKey property to true, the Tab key will be used for indenting paragraphs. Pressing the Tab key at the very start of a paragraph will indent the first line. In HTML, this is the text-indent style. Pressing the Tab key anywhere else will cause the whole paragraph to be indented. This affects the padding-left style in the HTML output. Pressing Shift+Tab will reverse the effects. The TabSize property can be used to specify the pixel size of the tab.
  • Hex Color Encoding
    By default, the HTML output that the control produces will encode foreground and background colors using the RGB format. If you set the RichTextEditor.ColorEncoding property to Hex, then the HTML output will use hex encoding for the colors. When importing HTML, the editor will happily accept both color formats.
  • Copy Rich Formatting
    The editor now also preserves rich text formatting when copying and pasting within the editor.

To take advantage of these new features in your applications, make sure to download the latest nightly build. You can download the free trial version from here, or go to your account page if you’re already a customer. If you have any questions or feature requests, let us know in the forum.

Leave a Reply


Join our mailer

You should join our newsletter! Sent monthly:

Back to Top