Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to: Use WPF Spell Checker in MVVM Applications

  • 4 minutes to read

This topic explains how to use the MVVM approach to manage Spell Checker integrated into a text-aware control. This approach allows you to handle spell-checker events or store dictionary files in a database.

If your application does not require tracking user interaction or UI customization, you can add a spell checking behavior and manage it in XAML. Refer to the following article for more information: Configure Spell-Checking Behavior.

#Create and Bind a Spell Checker

You can use the SpellingSettings option to integrate the Spell Checker into a supported text-aware control.

In the ViewModel class, create a SpellChecker class instance and specify its Culture, SpellingFormType, and SpellCheckMode properties.

View Example

using DevExpress.Mvvm;
using DevExpress.Xpf.SpellChecker;
using DevExpress.XtraSpellChecker;
// ...
public class MainViewModel
{
// ...
public virtual SpellChecker SpellChecker { get; set; }
// ...
{
    // Create a SpellChecker class instance.
    SpellChecker = new SpellChecker();
    // Specify the SpellChecker's properties.
    SpellChecker.SpellingFormType = SpellingFormType.Word;
    SpellChecker.SpellCheckMode = SpellCheckMode.AsYouType;
    SpellChecker.Culture = new CultureInfo("de-DE");
// ...
}

In XAML, add references to the following namespaces:

xmlns:ViewModel="clr-namespace:DXSpellCheckerBindingDictionaries.ViewModel"
xmlns:dxsch="http://schemas.devexpress.com/winfx/2008/xaml/spellchecker"

Bind the attached SpellingSettings.SpellChecker property to the created SpellChecker object to enable spell check for a text editor. You can bind this property at the level of the root container to enable this functionality for its children.

<Grid dxsch:SpellingSettings.SpellChecker="{Binding SpellChecker}" 
      dxsch:SpellingSettings.CheckAsYouType="True" 
      dxsch:SpellingSettings.ShowSpellCheckMenu="True" 
      dxsch:SpellingSettings.UnderlineColor="Blue" 
      dxsch:SpellingSettings.UnderlineStyle="WavyLine" 
      dxsch:SpellingSettings.DictionarySourceCollection="{Binding Dictionaries, UpdateSourceTrigger=PropertyChanged}">

#Bind Dictionaries

Create a DictionarySourceCollection Dictionaries property to bind dictionaries. Create a new DictionarySourceCollection and add a new dictionaries to it. Specify the dictionary file, the affix file, and the culture settings of the dictionary.

public class MainViewModel
{
    public virtual DictionarySourceCollection Dictionaries { get; set; }
// ...
public MainViewModel()
{
// ...
Dictionaries = GetDictionaries();
// ...
}
// ...
public DictionarySourceCollection GetDictionaries()
{
    // Create a dictionary collection.
    var collection = new DictionarySourceCollection();

    // Create a Hunspell spell-checking dictionary.
    var dictionary = new HunspellDictionarySource() { Culture = new CultureInfo("de-DE") };

    // Load the dictionary file.
    dictionary.DictionaryUri = new Uri(@"pack://application:,,,/DXSpellCheckerBindingDictionaries;component/Dictionaries/de_DE.dic");
    // Load the affix file.
    dictionary.GrammarUri = new Uri(@"pack://application:,,,/DXSpellCheckerBindingDictionaries;component/Dictionaries/de_DE.aff");
    // Add the dictionary to the collection.
    collection.Add(dictionary);

    var customDictionary = new SpellCheckerCustomDictionarySource() { Culture = new CultureInfo("EN-us") };
    customDictionary.DictionaryUri = new Uri(@"pack://application:,,,/DXSpellCheckerBindingDictionaries;component/Dictionaries/CustomEnglish.dic");
    customDictionary.AlphabetUri = new Uri(@"pack://application:,,,/DXSpellCheckerBindingDictionaries;component/Dictionaries/Alphabet.txt");
    collection.Add(customDictionary);
    return collection;
}

In XAML, bind the SpellingSettings.DictionarySourceCollection to the Dictionaries property:

<Grid dxsch:SpellingSettings.SpellChecker="{Binding SpellChecker}" 
      dxsch:SpellingSettings.CheckAsYouType="True" 
      dxsch:SpellingSettings.ShowSpellCheckMenu="True" 
      dxsch:SpellingSettings.UnderlineColor="Blue" 
      dxsch:SpellingSettings.UnderlineStyle="WavyLine" 
      dxsch:SpellingSettings.DictionarySourceCollection="{Binding Dictionaries, UpdateSourceTrigger=PropertyChanged}">

#Handle Spell Checker Events

Subscribe to and handle spell checker events in the ViewModel class. Refer to the following table for a complete list of available events: SpellChecker Events

The following code snippet handles the SpellingFormShowing and RepeatedWordFound events:

{
// ...
    // Subscribe to events
    SpellChecker.RepeatedWordFound += SpellChecker_RepeatedWordFound;
    SpellChecker.CheckCompleteFormShowing += SpellChecker_CheckCompleteFormShowing;

}

private void SpellChecker_CheckCompleteFormShowing(object sender, FormShowingEventArgs e)
{
    MessageBoxService.Show("That's It!");
    e.Handled = true;
}

private void SpellChecker_RepeatedWordFound(object sender, RepeatedWordFoundEventArgs e)
{
    e.Result = SpellCheckOperation.Cancel;
}

This example uses the DXMessageBoxService to show a message. Register this service in XAML:

<dxmvvm:Interaction.Behaviors>
    <dx:DXMessageBoxService />
</dxmvvm:Interaction.Behaviors>
See Also