Create QR Code for Windows Phone 8 Apps using Telerik RadBarcodeQR Control

In this post we will take a look on creating QR Code in Windows Phone 8 Applications. We will use Telerik RadBarcodeQR control to create QR code. We will follow step by step approach to achieve this. At the end of this post we will create application as following,

image

Let us follow following steps to work with QR codes.

Step 1

In Windows Phone Application project we need to add Telerik Rad Controls for Windows Phone dll as reference. After adding that add following namespace on XAML.


xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
 xmlns:telerikDataViz="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization

Step 2

After we have added reference we can simple create QR code with hard coded information as follows. We can create QR code using RadBarcodeQR control.

<telerikDataViz:RadBarcodeQR x:Name="qrContact"
 Opacity="1" Version="20"
 ErrorCorrectionLevel="H"
 Mode="Byte"
 ECI="ISO8859_1"
 FNC1="FNC1SecondPosition"
 Text="your data"
 ApplicationIndicator="00"/>

At this point on running application we will get QR code generated with hard coded data. We will get application running as following,

clip_image002

As we can see that following properties of QR code is configurable.

image

Step 3

As of now we have created QR code with hardcoded data. Let us go ahead and take user input as data and then create QR code of that data.

In XAML, divide content grid in two rows. In first row we will put QR code and in second row RadTextBox to enter user input. On click event of the button we will create QR code

Let us put following XAML to take user input


<StackPanel Orientation="Vertical" Grid.Row="1">
 <TextBlock Text="Contact details"
 Foreground="{StaticResource PhoneSubtleBrush}"
 Margin="12, 6, 12, -6"/>

<telerikPrimitives:RadTextBox Watermark="First and last name"
 Margin="0, -6, 0, 0"
 x:Name="nameTextBox"/>
 <telerikPrimitives:RadTextBox Watermark="Phone number"
 InputScope="TelephoneNumber"
 Margin="0, -12, 0, 0"
 x:Name="phoneTextBox"/>
 <telerikPrimitives:RadTextBox Watermark="Email"
 InputScope="EmailNameOrAddress"
 Margin="0, -12, 0, -2"
 x:Name="mailTextBox"/>

<Button Content="generate QR code"
 x:Name="btngenerateCode"
 />
 </StackPanel>

&nbsp;

Now on click event of the button we will set text property of QR code. We need to make sure that we have not set text property declaratively in XAML.


<telerikDataViz:RadBarcodeQR x:Name="qrContact"
 Opacity="0" Version="20"
 ErrorCorrectionLevel="H"
 Mode="Byte"
 ECI="ISO8859_1"
 FNC1="FNC1SecondPosition"
 ApplicationIndicator="00"/>

On click event of the button we need to set text property. That can be done as following. In below code we are doing concatenation of name, phone number and email as single string and then setting that as text property of QR code.


void btngenerateCode_Click(object sender, RoutedEventArgs e)
 {

 string qrdata = nameTextBox.Text + " " + mailTextBox.Text + " " + phoneTextBox.Text;
 qrContact.Text = qrdata;
 qrContact.Opacity = 1;
 }

On running application we can create QR code from use provided information.

clip_image002[6]

In this very simple we can create QR code using Telerik RadBarcodeQR control. I hope you find this post useful. Thanks for reading.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s