ZXing QR Code Display in Xamarin.Forms

You can find my source code here.

So Xamarin and I have this love-hate relationship. I love it because it makes it super productive for a C# developer to build iOS and Android apps with one codebase but on the other hand, when using third party libraries its an absolute confusing mess. It’s really a non-trivial thing to figure out which version of a Nuget package you should use in which project this got even worse with the introduction of .NET Standard as an additional (and preferred) option for the shared code library. So now we have to navigate several variants of Xamarin projects:

  1. Xamarin.Forms PCL
  2. Xamarin.Forms .NET Standard
  3. Xamarin.Android
  4. Xamarin.iOS

Often times this is not very well documented.

I’ve been testing this ZXing (Zebra crossing) library which has a .NET port called “ZXing.net”. I started off with this Nuget package but couldn’t get it to work.

I ultimately settled on the following Nuget packages:

https://www.nuget.org/packages/ZXing.Net.Mobile/

This package gets added to the Android, iOS and UWP projects and allows those native projects to build / compile and ultimately function using the shared .NET Standard project’s code.

https://www.nuget.org/packages/ZXing.Net.Mobile.Forms/

This package gets added to the shared .NET Standard project (where the lion’s share of your code is created / maintained).

In the Xamarin.Forms project it was relatively easy to create a simple barcode. There is a control in the “ZXing.Net.Mobile.Forms” namespace which you can add to any XAML view by adding an xml namespace like so:

Then you can define the control within your content like so:

One challenge is the BarcodeOptions property which is not easily set from pure XAML alone. I had to use code behind to initialize it.

Of course, much of this could be setup using data bindings to a view model but in my simple demo I just wanted to get it working. The results are pretty sweet!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s