Embedding the Bing OCR Control in an Application

Article
07/05/2016

This article is obsolete. It describes how to incorporate The Bing Optical Character Recognition (OCR) Control into a XAML application.

Published date: March 4, 2014

Warning

The Bing OCR Control is deprecated as of March 12, 2014.

Enabling the camera

You must explicitly enable your application to access the camera on the end users computer.

To enable the camera

From Solution Explorer, open Package.appxmanifest.
In the Capabilities tab, check the box labeled Webcam.

Adding the Bing OCR control to a XAML page

Declaring the OCR control in markup is the easiest way to work with Bing OCR, and is sufficient for most applications.

To add the OCR control to a XAML page

From Solution Explorer, open MainPage.XAML.
From the Toolbox, expand the Bing node, and then drag the OcrControl onto the design surface. This declares the Bing.Ocr Namespace on your page and adds an instance of the control.
```
<Page
                                xmlns:Ocr="using:Bing.Ocr" ...>

<Grid ...>
    <Ocr:OcrControl .../>
</Grid>
```
Resize the control as needed.

Warning

If you have installed the Bing OCR Control but it does not appear in the Toolbox, you must add a reference to Bing.Ocr.Winmd.

To add a reference to Bing.Ocr.Winmd
1. From Solution Explorer, right-click References and select Add Reference...
2. In the left pane of the Reference Manager window, expand the Windows node and then select Extensions.
3. Check the box labeled Bing OCR and then click OK.
In the markup for the control, assign a Name attribute.
```
<Ocr:OcrControl x:Name="OCR" .../>
```
You can optionally include an Instruction Overlay element inside the OcrControl element to display text in the control. Set the IsHitTestVisible attribute to false to prevent the overlay from intercepting taps and mouse clicks.
```
<Ocr:OcrControl x:Name="OCR" ...>
    <Ocr:OcrControl.InstructionOverlay>
        <TextBlock Text="Click or tap to capture image." 
           IsHitTestVisible="False" />
    </Ocr:OcrControl.InstructionOverlay>
</Ocr:OcrControl>
```
Open MainPage.xaml.cs.

Create an event handler for the page load event.

public MainPage()
{
    this.InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
}

In the page load event handler, set the ClientId and ClientSecret properties for the control. These are required for web service authentication. To obtain a client ID and Secret, see How to: Install and Register the Bing OCR Control with the Azure Data Marketplace.
```
private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    OCR.ClientId = 
                                <your client id>;
    OCR.ClientSecret = 
                                <your client secret>;
}
```
Create a call to the StartPreviewAsync() method. You can put this call in the page load event handler or in another event handler such as a button click.
```
await OCR.StartPreviewAsync();
```
This method starts the camera in preview mode. When the user clicks or taps on the viewing area, the control takes a picture. It then sends the picture to the OCR service for analysis.

The StartPreviewAsync() method is not thread safe, so your code should prevent it from running in multiple instances at the same time. If starting the method from a user interaction, such as a button, you should disable that interaction until the call completes.
```
private async void btnStart_Click()
{
    btnStart.IsEnabled = false;
    await OCR.StartPreviewAsync();
    btnStart.IsEnabled = true;
}
```
Parse the response from the OCR service by handling the OcrControl.Completed Event as described in How to: Extract text from an OCR result and How to: Extract text position data from an OCR result.
Add error handling, as described in the OcrControl.Failed Event documentation.

Creating the Bing OCR control in code

Creating the OCR control in code allows you to dynamically add the control when it is needed in a multi-function application without taking up screen space or camera resources at other times.

To create an OCR control instance in code

Create a container on the XAML page to host the control.
```
<Grid x:Name="OcrHost" .../>
```

Add a button to turn on OCR.

<Button x:Name="btnStartOcr" Content="Start OCR" Click="btnStartOcr_Click" .../>

At the top of MainPage.xaml.cs, add the Bing.Ocr namespace.
```
using Bing.Ocr;
```

In the event handler for the button, create an OcrControl instance.

OcrControl OCR;
private void btnStartOcr_Click(object sender, RoutedEventArgs e)
{
    // Create the control.
    OCR = new OcrControl();
}

Add the required credentials.

OCR.ClientId = 
                                <your client id>;
OCR.ClientSecret = 
                                <your client secret>;

Assign event handlers for the OcrControl.Completed, OcrControl.Failed, and FrameworkElement.Loaded events.

// Assign event handlers.
OCR.Completed += Ocr_Completed;
OCR.Failed += Ocr_Failed;
OCR.Loaded += Ocr_Load;

Place the control on the page.

OcrHost.Children.Add(OCR);

The completed button click handler should resemble the following:

OcrControl OCR;
private void btnStartOcr_Click(object sender, RoutedEventArgs e)
{
    // Create the control.
    OCR = new OcrControl();

    // Set credentials.
    OCR.ClientId = 
                                <your client id>;
    OCR.ClientSecret = 
                                <your client secret>;

    // Assign event handlers.
    OCR.Completed += Ocr_Completed;
    OCR.Failed += Ocr_Failed;
    OCR.Loaded += Ocr_Load;

    // Place the control on the page.
    OcrHost.Children.Add(OCR);
}

In the Load event handler, put a call to the OcrControl.StartPreviewAsync() Method. Alternatively, you can put this call in the click handler for another button.
```
private async void Ocr_Load(object sender, RoutedEventArgs e)
{
    await OCR.StartPreviewAsync();
}
```
Fill in the other event handlers as described in the previous procedure.