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,
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,
As we can see that following properties of QR code is configurable.
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>
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.
In this very simple we can create QR code using Telerik RadBarcodeQR control. I hope you find this post useful. Thanks for reading.
Follow @debug_mode