Creating A Barcode And QR Code Scanner For Windows Phone 8.1 RT

Charwaka Thupili

Windows App BarcodeQR Code ScannerWindows Phone 8.1 RT

27 Comments

Join the conversation! Your thoughts help the community grow.

Jack Winter8y ago
Can you please email the code to [email protected]
manish gupta9y ago
Hii Please provide me the code to my email id [email protected] If any has for this blog
Charwaka Thupili10y ago
I will upload entire project ziped pls inbox me [email protected]
Alex Luis10y ago
Can you PLEASE upload you sample project?
Lucky Ncube10y ago
Unfortunately Code is not working as explained
Stuart Buckwell10y ago
Hi, I couldn't get this to work either (probably because I am new to wp8!) Does anyone have a dummy basic version of this yet? Please upload it!!
Alex Luis10y ago
Can you provide a sample project with running code?
Kishor Bikram Oli10y ago
Nice. Thanks!
Vakils Premedia11y ago
Hey i am new to windows phone development and am struggling with this QRCode scanner kindly provide me app code
Charwaka Thupili11y ago
In Landscape mode it can Scan Both Qr and Barcode Checkout !
Arun Dave11y ago
I am successfully able to developed application in windows phone 8.1 winrt. But the problem is only qr code is scanning. Can any one guide how to scan barcode.
- Alex Luis10y ago
  Can you please share your solution?? Thank you :-)
Charwaka Thupili11y ago
Hi everyone one i'm super busy with projects now ,i will surely post complete working project.
- Alex Luis10y ago
  Hello Charwaka! Thanks for the help but unfortunatly I wasn't able to compile the code in your tutorial. Can you share a dummy solution? THANKS!
Mark Vener11y ago
Hello! I can't find the declaration of MyImage in Step 5 line 53. May I ask you to tell me where should I declarate it?
Sven Gschwend11y ago
In Step 9 in OnNavigatedTo() on Line 11: storageFolde is not defnied (should be probablymyFolder), result ond Line 13 is not defnied, but defined on Line 44 with another meaning. One should probably be the textbox. result.Label does not exist, cannot await in catch block ... I guess you didn't copied the source of your running example into this article?
- Charwaka Thupili11y ago
  i Will Attach A Sample Project For Clarification.But From My Side Everything is Clear And Some of Readers Successfully made a demo project with above code and replied me ! Any Way Thanks :)
- Sven Gschwend11y ago
  I'm really looking forward for your dummy project and I'm sure there are a lot of readers with far more knowledge in C# than me and can fix or adjust the required parts to create a running project. But the code snippets can't be copied/pasted as Mark mentioned below as well.
Sven Gschwend11y ago
Unfortunately badly explained. Using statements are missing, it's not obvious in which class I have to implement the OnNavigateTo()-events of Step 4 and Step 8. MyImage in Step 5 Line 53 is not declared, Step 6, event on Line 36 is not declared. Can't you just upload your dummy solution? Thx
- Charwaka Thupili11y ago
  yeah i'm sorry ,But Intellisense will help you to import appropriate using statements.And In step 4 i clearly mentioned To Create A Blank Page And Add that page in Navigate Event of scan. So Obviously OnNavigated Will Come Under That Page Only.Step 8 is also clear Add BackeyEvent in Onvigated Event so that you can call exit methods in its Handler.Everything is Clear And Why Your Commenting like this is Dont Understand.Thank You
Santhakumar Munuswamy11y ago
Nice Article. Thanks for sharing
Charwaka Thupili11y ago
Thank James I Forgot To Mention This. Flip Through this page https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465115.aspx for handling in resume and suspend state
James Croft11y ago
Great post for getting started with barcode/QR scanning. For those looking to implement this further, remember to handle suspend and resume in your app as the connection to the camera will need to be re-established correctly.
Karthikeyan K11y ago
Good one sir
Sumit Joshi11y ago
thanks for share.
Pankaj Kumar Choudhary11y ago
Nice Explain Sir........
Rakesh11y ago
Good one

In this article I will show you how to write a barcode and QR scanner for Windows Phone 8.1 Runtime Apps. So let's start.

Step 1: Firstly, create a Windows Phone RT Project.

Step 2: Now Go to References, then Manage Nuget Packages and search now Add Zxing Nuget Package to your app as in the following screenshots:

Add Zxing Nuget Package

Accept the Agreement and Install the Nuget Package.

Step 3: Now first we start with creating UI for our App Go to MainPage.xaml, open the Designer.write xaml code like the following code snippet and you have to upload your own images and fonts.

<Grid x:Name="LayoutRoot" Height="640" Margin="0,0.333,0,-0.333" HorizontalAlignment="Left" VerticalAlignment="Top" Background="#163146">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Height="110" Background=" #36B4A8" Orientation="Horizontal">
<TextBlock Margin="12,40,0,0" FontFamily="Fonts/HelveticaNeue Thin.ttf#HelveticaNeue" FontSize="38" Foreground="White" Text="QR & BARCODE SCAN" />
</StackPanel>
<Grid Grid.Row="1" Background="#FFFFFF">
<StackPanel Margin="12,100" HorizontalAlignment="Stretch" VerticalAlignment="Top" Orientation="Vertical">
<StackPanel Height="50" Orientation="Horizontal" Tapped="StackPanel_Tapped">
<Image HorizontalAlignment="Left" Source="Assets/QR Code-50.png" Stretch="Uniform" />
<TextBlock Margin="8,8" FontFamily="Fonts/HelveticaNeue Thin.ttf#HelveticaNeue" FontSize="32" Foreground="#36B4A8" Text="Scan" />
</StackPanel>
<StackPanel Height="50" Margin="0,30" Orientation="Horizontal" Tapped="StackPanel_Tapped_1">
<Image HorizontalAlignment="Left" Source="Assets/View File-50.png" Stretch="Uniform" />
<TextBlock Margin="8,8" FontFamily="Fonts/HelveticaNeue Thin.ttf#HelveticaNeue" FontSize="32" Foreground="#36B4A8" Text="View" />
</StackPanel>
</StackPanel>
</Grid>
</Grid>

Output

run

Under Tap Events Navigate write the following code snippet to navigate respective pages.

this.Frame.Navigate(typeof(MainPage)); like this whatever the page name put there.

main page

Step 4: Add another blank page to your project, add the following code to UI (Make sure Add to Navigate To This Page in Tapped Event of Scan) as shown above.

<Grid x:Name="LayoutRoot" Background="#163146" HorizontalAlignment="Left" VerticalAlignment="Top">
<CaptureElement x:Name="captureElement" Stretch="UniformToFill" />
</Grid>

Now let's start coding the backend. Add using ZXing; Namespace declare properties and constructors below sealed class.

private MediaCapture _mediaCapture;
private byte[] imageBuffer;
public int exit = 0;
private MessageDialog dialog;
private ApplicationView currentView = ApplicationView.GetForCurrentView();

Go to OnNavigatedTo Event and write the following code to Initialize the Scanner:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
exit = 0;
ScanQrCode();
}

Step 5: Scan QR code method. In this first we need to initialize the camera before decoding the captured image.

private async void ScanQrCode() {
try {
await InitializeQrCode();
var imgProp = new ImageEncodingProperties {
Subtype = "BMP", Width = 380, Height = 380
};
var bcReader = new BarcodeReader();
while (exit == 0) {
var stream = new InMemoryRandomAccessStream();
await _mediaCapture.CapturePhotoToStreamAsync(imgProp, stream);
stream.Seek(0);
var wbm = new WriteableBitmap(380, 380);
await wbm.SetSourceAsync(stream);
var result = bcReader.Decode(wbm);
if (result != null) {
var torch = _mediaCapture.VideoDeviceController.TorchControl;
if (torch.Supported) torch.Enabled = false;
await _mediaCapture.StopPreviewAsync();
var msgbox = new MessageDialog(result.Text);
await msgbox.ShowAsync();
try {
StorageFolder folder = ApplicationData.Current.LocalFolder;
if (folder != null) {
//Saving Scan Text
StorageFile sampleFile = await folder.CreateFileAsync("sample.txt", CreationCollisionOption.ReplaceExisting);
await Windows.Storage.FileIO.WriteTextAsync(sampleFile, "Swift as a shadow");
//Saving Scan Image
StorageFile file = await folder.CreateFileAsync("imagefile" + ".jpg", CreationCollisionOption.ReplaceExisting);
using(var storageStream = await file.OpenAsync(FileAccessMode.ReadWrite)) {
var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, storageStream);
var pixelStream = wbm.PixelBuffer.AsStream();
var pixels = new byte[pixelStream.Length];
await pixelStream.ReadAsync(pixels, 0, pixels.Length);
encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint) wbm.PixelWidth, (uint) wbm.PixelHeight, 48, 48, pixels);
await encoder.FlushAsync();
}
}
MyImage.Source = wbm;
exit = 1;
} catch (Exception ex) {
MessageDialog dialog = new MessageDialog("Error while initializing media capture device: " + ex.Message);
dialog.ShowAsync();
GC.Collect();
}
//
}
}
} catch {}
}

Step 6: Camera Initialization with required features. So to scan perfectly we are enabling torch and continuous focus so that scanning QR| Barcode becomes fast and simpler.

private async Task InitializeQrCode() {
string error = null;
try {
//if (_mediaCapture == null)
//{
// Find all available webcams
DeviceInformationCollection webcamList = await DeviceInformation.FindAllAsync(DeviceClass.VideoCapture);
// Get the proper webcam (default one)
DeviceInformation backWebcam = (from webcam in webcamList where webcam.IsEnabled select webcam).FirstOrDefault();
// Initializing MediaCapture
_mediaCapture = new MediaCapture();
await _mediaCapture.InitializeAsync(new MediaCaptureInitializationSettings {
VideoDeviceId = backWebcam.Id,
AudioDeviceId = "",
StreamingCaptureMode = StreamingCaptureMode.Video,
PhotoCaptureSource = PhotoCaptureSource.VideoPreview
});
// Adjust camera rotation for Phone
_mediaCapture.SetPreviewRotation(VideoRotation.Clockwise90Degrees);
_mediaCapture.SetRecordRotation(VideoRotation.Clockwise90Degrees);
// Set the source of CaptureElement to MediaCapture
captureElement.Source = _mediaCapture;
await _mediaCapture.StartPreviewAsync();
_mediaCapture.FocusChanged += _mediaCapture_FocusChanged;
// Seetting Focus & Flash(if Needed)
var torch = _mediaCapture.VideoDeviceController.TorchControl;
if (torch.Supported) torch.Enabled = true;
await _mediaCapture.VideoDeviceController.FocusControl.UnlockAsync();
var focusSettings = new FocusSettings();
focusSettings.AutoFocusRange = AutoFocusRange.FullRange;
focusSettings.Mode = FocusMode.Continuous;
focusSettings.WaitForFocus = true;
focusSettings.DisableDriverFallback = false;
_mediaCapture.VideoDeviceController.FocusControl.Configure(focusSettings);
await _mediaCapture.VideoDeviceController.FocusControl.FocusAsync();
//}
} catch (Exception ex) {
dialog = new MessageDialog("Error: " + ex.Message);
dialog.ShowAsync();
}
}

Step 7: In Step 5 we are saving the result of scan in the storage folder, so that we can retrieve the image for cross verifying.

code

We have to encode the image properly while saving image to storage folder (like shown above) or else we will get blank images while retrieving the image .

Step 8: Now we have to stop the camera and unsubscribe from all camera related events in BacKkeyPress Event:

protected override void OnNavigatedTo(NavigationEventArgs e) {
Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed;
}
private async void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e) {
exit = 1;
_mediaCapture.Dispose();
if (this.Frame.CanGoBack) {
e.Handled = true;
this.Frame.GoBack();
}
}

Step 9: Now let's start creating UI for viewing image and create a blank template, name it View.

<Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#163146">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="1">
<Image x:Name="myimage" Width="300" Height="300" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="Fill" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Text="" TextWrapping="Wrap" />
</StackPanel>
</Grid>

Go to View.xaml.cs and write the following code in OnNavigatedTo Event.

protected async override void OnNavigatedTo(NavigationEventArgs e) {
try {
string fileName = "imagefile.jpg";
StorageFolder myfolder = ApplicationData.Current.LocalFolder;
BitmapImage bitmapImage = new BitmapImage();
StorageFile sampleFile = await storageFolder.GetFileAsync("sample.txt");
string text = await Windows.Storage.FileIO.ReadTextAsync(sampleFile);
result.Text = text.ToString();
StorageFile file = await myfolder.GetFileAsync(fileName);
if (file != null) {
var image = await Windows.Storage.FileIO.ReadBufferAsync(file);
Uri uri = new Uri(file.Path);
BitmapImage img = new BitmapImage(new Uri(file.Path));
myimage.Source = img;
} else {
var messgeDialog = new MessageDialog("Something went Wrong ");
messgeDialog.Commands.Add(new UICommand("Yes"));
messgeDialog.Commands.Add(new UICommand("No"));
messgeDialog.DefaultCommandIndex = 0;
messgeDialog.CancelCommandIndex = 1;
var result = await messgeDialog.ShowAsync();
if (result.Label.Equals("Yes")) {}
}
} catch (Exception ex) {
var messgeDialog = new MessageDialog("Theres no image to view :( ");
messgeDialog.Commands.Add(new UICommand("ok"));
messgeDialog.DefaultCommandIndex = 0;
messgeDialog.CancelCommandIndex = 1;
var result = await messgeDialog.ShowAsync();
if (result.Label.Equals("ok")) {
if (this.Frame.CanGoBack) {
this.Frame.GoBack();
}
}
}
}

Output of scan

Output

Now go to View

Feedback Note

Please share your thoughts, what you think about this post, Is this post really helpful for you? I always welcome if you drop comments on this post.