QR Code Generation App in Windows Phone

We are implementing QR Codes in a Windows Phone 8 App.

Introduction

With Smart Phones we have many sensors and technologies. Either they can be a Proximity Sensor, Geo Sensor or your Accelerometer. All these are integrated under a single smart phone to make our life truly Smart.

You have done it many times when you are ticketing on the IRCTC or downloading an app by scanning the QR code.



Actually, these are all made to make our life simpler. We will now learn how to make these codes ourselves and implement then in a Windows Phone 8 App prototype.

Background

We are implementing this in a Windows Phone8 App. For the demonstration we need:

  • Visual Studio 2013, that supports Windows Phone App development.
  • Zxing.dll [http://zxingnet.codeplex.com/] or, get it from NuGet

And the rest you need is basic C# knowledge and patience.

Agenda for this Demonstration

  1. First, we add a Button and an image from the tool box on Mainpage.xaml page.
  2. Inside, MainPage.cs we try to make a GenerateQRCode() method that returns the image.
  3. Before we call the GenearteQRCode() method, we first call the ContactChooser chooser and select a contact for further processing.
  4. And then select the phone number of that contact and it as a parameter to the GenerateQRCode() method.
  5. Last, put the returned value of the GenerateQRCode() to source property of the Image.

Procedure

Step 1: Try to make a look like a layout in your Windows Phone Project.



Step 2 : Now, raise the click event of the button. Put these lines of code.

  1. private void Button_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.      // Contacts  
  4.      PhoneNumberChooserTask contacts = new PhoneNumberChooserTask();  
  5.      contacts.Completed += contacts_Completed;  
  6.      contacts.Show();  
  7. }  
  8.   
  9. void contacts_Completed(object sender, PhoneNumberResult e)  
  10. {  
  11.      var image= GenerateQRcode(e.PhoneNumber.ToString());  
  12.               
  13.      // Set to Image's Source Property  
  14.      codeImage.Source = image;  
  15. }  
Actually, here we are calling the ContactChooser chooser. And, when the task is completed, then we call the GenerateQRcode() method with the selected PhoneNumber in the parameter.

So, how the GenerateQRcode() method behaves. This we will see in the next step.

Step 3
  1. static WriteableBitmap GenerateQRcode(string phoneNumber)  
  2. {  
  3.      BarcodeWriter _writer = new BarcodeWriter();  
  4.      _writer.Renderer = new ZXing.Rendering.WriteableBitmapRenderer()  
  5.      {  
  6.          //i.e. Blue Color  
  7.          Foreground = System.Windows.Media.Color.FromArgb(255, 0, 0, 255)  
  8.      };  
  9.      _writer.Format = BarcodeFormat.QR_CODE;  
  10.      _writer.Options.Height = 400;  
  11.      _writer.Options.Width = 400;  
  12.      _writer.Options.Margin = 1;  
  13.   
  14.      var barcodeImage = _writer.Write("tel:"+phoneNumber);  
  15.               
  16.      return barcodeImage;  
  17. }  
Here, we create the BarcodeWriter instance. So, ensure you have ‘using ZXing;" in your namespace list.

Then, assign the Render property with WritableBitmap image.

Confirm the color of QR code in ARGB value. For black you can try (255, 0, 0, 0).

Then, what kind of code format do you want?

So, we want the QR Code here. And the rest is self-explanatory.

In the last, we return the image.

Final Output



Conclusion


You can try to implement more features to it. However, there are not many complications. Still, you have some then get in the project that I have enclosed with this article.