How to disable the spell checker on an AutoSuggestBox

Question

I would like to disable the spell checker in a Windows Phone 8.1 application, which is on by default on an AutoSuggestBox, but not desired:

The markup of the control:

<AutoSuggestBox 
    Name="txtOrgunit" 
    TextChanged="txtOrgunit_TextChanged"
    SuggestionChosen="txtOrgunit_SuggestionChosen">
</AutoSuggestBox>

How can I achieve that the IsSpellCheckEnabled property goes false on the internal textbox from markup or from code?

Existing solutions I have found either deal with the same problem on other platforms (like this:

How can I disable the spell checker on text inputs on the iPhone

and this:

how to disable spell checker for Android AutoCompleteTextView?)

or they are unwieldy rocket science, like this:

https://social.msdn.microsoft.com/Forums/windowsapps/en-US/c2139520-26e9-4a74-819d-defb4e20857c/how-to-disable-spell-check-grammer-in-autosuggestbox?forum=wpdevelop

EDIT: After applying the solution proposed in the first answer verbatim, the OP goal is achieved, but the functionality of the control is broken (the event is raised, the itemssource ends up with 30 items, but none of them is shown - no "dropdown" appears any more). Therefore I give the source code of the txtOrgunit_TextChanged handler below:

private void txtOrgunit_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
    if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
    {
        var ui = sender.Text.Trim().ToUpperInvariant();
        var matches = new List<IdAndCaption>();
        var count = 0;
        for (int i = 0; i < Com.MasterdataBasic.Orgunits.Length; ++i)
        {
            var cand = Com.MasterdataBasic.Orgunits[i];
            var cap = String.Format("{0} {1}", cand.Abbrev, cand.LongCap);
            if (cap.ToUpperInvariant().Contains(ui))
            {
                var ele = new IdAndCaption() { Id = cand.OrgID, Caption = cap };
                matches.Add(ele);
                ++count;
                /* UX decided it unreasonable to have the user scroll through more...
                 * should type more letters to restrict further */
                if (count >= 30) break;
            }
        }
        sender.ItemsSource = matches;
        Rec.Report.OrgID = -1;
    }    
}

I verified that when I remove the style tag from the autosuggestbox, the autosuggest functionality is restored.

Answer 1

Unfortunately it seems the AutoSuggestBox control doesn't have the property IsSpellCheckEnabled so in order to do that you would need to create a ControlTemplate with a TextBox control that does contain the property IsSpellCheckEnabled and set it to False there.

What you want to do first is create a ResourceDictionary in your project if you haven't already got one:

For the purpose of this example I have given mine a name of Styles.xaml.

The code below will give you more or less what you want. You may want to adapt certain Setter properties but going off the example in the link you provided in your question I've cobbled together this:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppNamespace">

<!-- modified default style for AutoSuggestBox -->
<Style x:Name="AutoSuggestBoxStyle" TargetType="AutoSuggestBox">
    <Setter Property="Margin" Value="{ThemeResource TextControlMarginThemeThickness}" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="ListViewItem">
                <Setter Property="Margin" Value="{ThemeResource AutoSuggestListViewItemMargin}" />
                <Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" />
                <Setter Property="Foreground" Value="{ThemeResource TextBoxForegroundThemeBrush}" />
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AutoSuggestBox">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="Orientation">
                            <VisualState x:Name="Landscape"/>
                            <VisualState x:Name="Portrait"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <TextBox x:Name="TextBox"
                         IsSpellCheckEnabled="False"
                         PlaceholderText="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PlaceholderText}"
                         Header="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Header}"
                         Width="{TemplateBinding Width}"
                         ScrollViewer.BringIntoViewOnFocusChange="False"
                         Canvas.ZIndex="0"
                         Margin="0" />
                    <Popup x:Name="SuggestionsPopup">
                        <Border x:Name="SuggestionsContainer"
                              Background="{ThemeResource AutoSuggestBackgroundThemeBrush}"
                              BorderBrush="{ThemeResource PhoneAccentBrush}"
                              BorderThickness="{ThemeResource TextControlBorderThemeThickness}">
                            <Border.RenderTransform>
                                <TranslateTransform x:Name="UpwardTransform"/>
                            </Border.RenderTransform>
                            <ListView x:Name="SuggestionsList"
                              ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsSource}"
                              ItemTemplate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemTemplate}"
                              ItemTemplateSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemTemplateSelector}"
                              ItemContainerStyle="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemContainerStyle}"
                              RenderTransformOrigin=".5,.5">
                                <ListView.RenderTransform>
                                    <ScaleTransform x:Name="ListItemOrderTransform"/>
                                </ListView.RenderTransform>
                            </ListView>
                        </Border>
                    </Popup>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</ResourceDictionary>

Copy the XAML into the Styles.xaml.

You now need to reference to this new ResourceDictionary. This can either be done in your App.xaml or the page itself.

In the App.xaml this is how you would reference:

<Application
    x:Class="App6.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App6">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

</Application>

If for whatever reason you can't get to the XAML in your App.xaml then do a search for <Application and you should be able to get to it that way.

Then in the page itself you can create an AutoSuggestBox and reference to the AutoSuggestBoxStyle:

<AutoSuggestBox Style="{StaticResource AutoSuggestBoxStyle}"/>

In my example I have two AutoSuggestBoxes:

<StackPanel>
    <AutoSuggestBox Style="{StaticResource AutoSuggestBoxStyle}"/>
    <AutoSuggestBox></AutoSuggestBox>
</StackPanel>

This is how it looks in my emulator:

As you can see the top AutoSuggestBox which references to the style doesn't show the red line like the bottom one does.

Hope this helps.