Friday, 25 July 2014

Using a custom overlay in a Windows Phone QR code scanning app

Previously I’ve demonstrated how to build a simple Windows Phone app to perform QR code scanning, using the ZXing.Net.Mobile library. This library makes the scanning and decoding of bar codes effortless, leaving you to focus on other user experiences in your app.

In this blog post I’m going to extend the sample app so that it doesn’t use the default UI included with ZXing.Net.Mobile, when QR code scanning. Instead, a custom UI will be created and used during the QR code scanning process. This custom UI is referred to as an overlay.

Implementation

The first step is to define the overlay in the XAML code for the page.

<Grid Name="Overlay" Visibility="Collapsed">
    <Grid Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button Background="Black" Grid.Row="1" Grid.Column="0" Name="ButtonCancel">Cancel</Button>
        <Button Background="Black" Grid.Row="1" Grid.Column="1" Name="ButtonTorch">Torch</Button>
    </Grid>
</Grid>

This code defines a custom overlay named Overlay, which contains a Cancel button and a Torch button (for toggling on/off the flash) that will appear at the bottom of the page. The next step is pass the overlay to the ZXing.Net.Mobile library.

private UIElement _overlay = null;
 
private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    _scanner = new MobileBarcodeScanner(this.Dispatcher);
 
    if (_overlay == null)
    {
        _overlay = this.Overlay.Children[0];
        this.Overlay.Children.RemoveAt(0);
    }
 
    this.ButtonCancel.Click += (s, e2) =>
        {
            _scanner.Cancel();
        };
    this.ButtonTorch.Click += (s, e2) =>
        {
            _scanner.ToggleTorch();
        };
 
    _scanner.CustomOverlay = _overlay;
    _scanner.UseCustomOverlay = true;
 
    var result = await _scanner.Scan();
    ProcessScanResult(result);
}

After creating an instance of the MobileBarcodeScanner class the Overlay is retrieved from the visual tree and stored in a UIElement instance named _overlay. Then, the Cancel and Torch button Click events are wired up to methods in the MobileBarcodeScanner class, to cancel scanning, and toggle the torch respectively. The CustomOverlay property of the MobileBarcodeScanner instance is then set to _overlay, the UseCustomOverlay property of the MoblileBarcodeScanner instance is set to true to indicate that a custom overlay will be used during the QR scanning process, before the Scan method of the MobileBarcodeScanner instance is invoked. The following screenshot shows the custom overlay being displayed during the QR code scanning process (QR code image courtesy of Google Images):

image

While the overlay shown here is basic, it does show the mechanism used for creating a UI for the QR code scanning process that matches the rest of the UI used in your app.

When a QR code is successfully recognized the decoded result can be passed to a method for processing, in this case the ProcessScanResult method. For an explanation of this method see my previous blog post.

Summary

This blog post has demonstrated how to replace the default UI used by ZXing.Net.Mobile, with a custom UI of your own design. This allows you to create a UI for the QR code scanning process that matches the rest of the UI used in your app.

The sample app can be downloaded here.

2 comments:

  1. Sample's link is broken

    ReplyDelete
    Replies
    1. Apologies. All my OneDrive download links have broken. The updated link is:

      https://1drv.ms/u/s!AqqxnsyjuZgbgTyY7zXxOEzmXD4f

      Delete