Cognitive Service Bing Spell Check API Using Azure, XAML And C#

Before reading this article, please go through the articles, mentioned below.

Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
How To Create Microsoft Cognitive Service Bing Spell Check API On Azure Portal

Microsoft Cognitive Services (formerly Project Oxford) are a set of APIs, SDKs and Services available to the developers to make their Applications more intelligent, engaging and discoverable. Microsoft Cognitive Services expands on Microsoft’s evolving portfolio of the machine learning APIs and enables the developers to easily add intelligent features. Microsoft Cognitive Services allows you to build apps with powerful algorithms, using a few lines of code. They work across the devices and platforms such as iOS, Android and Windows, keep improving and are easy to set up.

Bing Spell Check API

It helps users to correct the spelling errors, recognize the differences among names, brand names and slang, as well as understand homophones as they’re typing.

After reading this article, you can learn how to do Cognitive Service Bing Spell Check API in Universal Windows apps development with Azure, XAML and Visual C#.

The important tools, mentioned below, are required for developing UWP.

Windows 10 (Recommended).
Visual Studio 2015 Community Edition (It is a free software available online).
Cognitive Service Bing Spell Check API Key (using azure How To Create Microsoft Cognitive Service Bing Spell Check API On Azure Portal).

Now, we can discuss step by step app development.

Step 1

Open Visual studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank app -> Give the suitable name for your app (UWPCogBingSpellCheck)->OK.

After choosing the Target and minimum platform version for your Windows, Universal Application will support the Project creates App.xaml and MainPage.xaml.

Step 2

Open (double click) the file MainPage.xaml in Solution Explorer and add the Newtonsoft.Json reference in the project. Right click on your Project (UWPCogBingSpellCheck) and select Manage NuGet Packages.

To add Newtonsoft.Json Reference, choose Browse and search Newtonsoft.Json. Select the package and install it.

Reference is added to your project

Step 3

Add TextBlock control, change the Name and text property for the title.

Add two TextBlock controls, change the Name and text property for SampleTex.,

Step 4

Add GridView Resources, using the code, mentioned below.

<Grid.Resources>
<CollectionViewSource x:Name="SearchResultsCol" Source="{x:Bind SearchResults}" IsSourceGrouped="False" />
</Grid.Resources>

Add a GridView Control and set the ItemSource properties,

<GridView x:Name="gvSpell" ItemsSource="{Binding Source={StaticResource SearchResultsCol}}" SelectionMode="None" IsItemClickEnabled="False" HorizontalAlignment="Left" Height="276" Margin="96,233,0,0" VerticalAlignment="Top" Width="1054">

Add the code, mentioned below for Grid View Item Template for Spell check review details.

<GridView.ItemTemplate>
<DataTemplate>
<Border Background="AliceBlue" Width="330" Height="80" Margin="8">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Margin="3,3,3,10">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel Margin="0,0,0,-143">
<TextBlock TextWrapping="Wrap" Text="{Binding spco.Offset}" Style="{StaticResource CaptionTextBlockStyle}" />
<TextBlock TextWrapping="Wrap" Text="{Binding spco.token}" Style="{StaticResource CaptionTextBlockStyle}" />
<TextBlock TextWrapping="Wrap" Text="{Binding spco.Suggestion}" Style="{StaticResource CaptionTextBlockStyle}" />
</StackPanel>
</Grid>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>

Step 5

Add a button control, set the Name and add the Edit icon for Spell Check.

Add the Click event method for search button.

Note

Automatically, the code, mentioned below will be generated in XAML code view, while we are done in the design view.

<Page x:Class="UWPCogBingSpellCheck.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPCogBingSpellCheck" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<CollectionViewSource x:Name="SearchResultsCol" Source="{x:Bind SearchResults}" IsSourceGrouped="False" />
</Grid.Resources>
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="380,96,0,0" TextWrapping="Wrap" Text="UWP Cognitive Service Bing Spell Check API Demo" VerticalAlignment="Top" FontWeight="Bold" FontSize="24" />
<TextBlock x:Name="tbltest" HorizontalAlignment="Left" Margin="46,166,0,0" TextWrapping="Wrap" Text="Sample Text : " VerticalAlignment="Top" FontWeight="Bold" FontSize="20" />
<TextBlock x:Name="tblText" HorizontalAlignment="Left" Height="36" Margin="178,166,0,0" TextWrapping="Wrap" Text="The Spell Check lets patners chck a text sting for speling and gramar erors. " VerticalAlignment="Top" Width="748" FontSize="22" />
<GridView x:Name="gvSpell" ItemsSource="{Binding Source={StaticResource SearchResultsCol}}" SelectionMode="None" IsItemClickEnabled="False" HorizontalAlignment="Left" Height="276" Margin="96,233,0,0" VerticalAlignment="Top" Width="1054">
<GridView.ItemTemplate>
<DataTemplate>
<Border Background="AliceBlue" Width="330" Height="80" Margin="8">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Margin="3,3,3,10">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel Margin="0,0,0,-143">
<TextBlock TextWrapping="Wrap" Text="{Binding spco.Offset}" Style="{StaticResource CaptionTextBlockStyle}" />
<TextBlock TextWrapping="Wrap" Text="{Binding spco.token}" Style="{StaticResource CaptionTextBlockStyle}" />
<TextBlock TextWrapping="Wrap" Text="{Binding spco.Suggestion}" Style="{StaticResource CaptionTextBlockStyle}" />
</StackPanel>
</Grid>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<Button x:Name="btnSpellchk" HorizontalAlignment="Left" Margin="1002,162,0,0" VerticalAlignment="Top" Click="btnSpellchk_Click" RenderTransformOrigin="3.6,0.312" ToolTipService.ToolTip="Click to Spell Check">
<SymbolIcon Symbol="Edit"></SymbolIcon>
</Button>
</Grid>
</Page>

Step 6

Add the namespaces, mentioned below in Mainpage.xaml.cs for Bing Spell Check.

using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json.Linq;
using System.Collections.ObjectModel;
using System.Net;

Step 7

Add the Academic Knowledge, where Client keys use Azure Service and generate it (For more information, please refer the article How To Create Microsoft Cognitive Service Bing Spell Check API On Azure Portal .)

Bing Spell Check API endpoint.
https://api.cognitive.microsoft.com/bing/v5.0/spellcheck/?

Add the code, mentioned below with Azure generated key for Bing Spell Check.

public class Spellc {
public string Offset {
get;
set;
}
public string token {
get;
set;
}
public string Suggestion {
get;
set;
}
}
public class Spellcol {
public Spellc spco {
get;
set;
}
}
public ObservableCollection < Spellcol > SearchResults {
get;
set;
} = new ObservableCollection < Spellcol > ();
private async void btnSpellchk_Click(object sender, RoutedEventArgs e) {
var sp = await spellcheck();
for (int i = 0; i < sp.Count(); i++) {
Spellc sc = sp.ElementAt(i);
SearchResults.Add(new Spellcol {
spco = sc
});
}
}
async Task < IEnumerable < Spellc >> spellcheck() {
List < Spellc > spelc = new List < Spellc > ();
var client = new HttpClient();
client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "9456ddf5ea3b4752ac8f87b63a7e6013");
string text = "The Spell Check lets patners chck a text sting for speling and gramar erors. ";
string mode = "proof";
string mkt = "en-us";
var SpellEndPoint = "https://api.cognitive.microsoft.com/bing/v5.0/spellcheck/?";
var result = await client.GetAsync(string.Format("{0}text={1}&mode={2}&mkt={3}", SpellEndPoint, text, mode, mkt));
result.EnsureSuccessStatusCode();
var json = await result.Content.ReadAsStringAsync();
dynamic data = JObject.Parse(json);
for (int i = 0; i < 6; i++) {
spelc.Add(new Spellc {
Offset = "Offset : " + data.flaggedTokens[i].offset,
token = "Wrong Word : " + data.flaggedTokens[i].token,
Suggestion = "Spelling Suggestion : " + data.flaggedTokens[i].suggestions[0].suggestion
});
}
return spelc;
}

Step 8

Deploy your app in Local Machine and the output of the UWPCogBingSpellCheck app is shown below.

After Clicking the Button,

Summary

Now, you have successfully tested Cognitive Service Bing Spell Check API, using Azure, XAML and C# with UWP environment.

If you are interested, please read the UWP Cognitive Service articles, mentioned below.