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

Step by Step working with Telerik Charts in Windows Phone 8

In this post we will take a look on working RadCharts in Windows Phone 8 Applications. I shall follow simplistic step by step approach for better learning of yours. At the end of this post we will complete creating a chart application as below.

Learn more Rad Controls for Windows Phone here

image

Step1: Create a Windows Phone 8 Application

Start with creating a Windows Phone 8 Application. To create Windows Phone Application choose Windows Phone App project template from Windows Phone tab.

clip_image002

Choose Windows Phone 0S 8.0 as Target Windows Phone OS version.

clip_image003

Next we need to add following references in the project to work with RadChart. To add references right click on the project and from context menu select Add Reference. After adding reference we are all set to work with RadCharts in Windows 8 project.

clip_image004

Step2: Add namespace on XAML

To work with chart now we need to add required references on XAML.


xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
xmlns:chartEngine="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"

After adding namespace we can put Chart on Xaml. A Chart can be created with following mark-up.


<chart:RadCartesianChart x:Name="chart">

 </chart:RadCartesianChart>

At this point if we go ahead and run application, we will find message that HorizontalAxis not set VerticalAxis not set.

image

Step3: Add VertialAxis and HorizontalAxis

Next step we need to add VerticalAxis and HorizontalAxis to chart. We can add axis as following,


<chart:RadCartesianChart x:Name="chart">
 <chart:RadCartesianChart.HorizontalAxis>
 <chart:CategoricalAxis/>
 </chart:RadCartesianChart.HorizontalAxis>
 <chart:RadCartesianChart.VerticalAxis>
 <chart:LinearAxis Maximum="100"/>
 </chart:RadCartesianChart.VerticalAxis>

</chart:RadCartesianChart>

There are different kind of Axes available. We will not get into details of each type in this post. However different kind of axes are as follows,

image

We are using Linear Axis for Vertical Axis and Cateogrical Axis as Horizontle axis in this example. At on running application we will get chart with two axis. However there will be no data rendered on chart. We are getting message that No Series added.

image

Step 4: Add Series to the Chart

In this step we will add Series to chart. We can add series to chart as following ,


<chart:RadCartesianChart.Series>
 <chart:LineSeries Stroke="Orange" StrokeThickness="2"></chart:LineSeries>
 </chart:RadCartesianChart.Series>

Likely Axis there are different kind of series is also available . We will talk about different series in later post. However different kind of series is as follows

image

At this point if we run application we will get message that there is no datapoint added in the chart. We will get expected output as following ,

image

Step 4: Add Data Point to Chart

We can add Data Point as following in the chart. We are adding data point in XAML here. In real time scenario we will have to fetch data from services and bind data point to chart at runtime. We can achieve that using data binding.

<chart:RadCartesianChart.Series>
 <chart:LineSeries Stroke="Orange" StrokeThickness="2">
 <chart:LineSeries.DataPoints>
 <chartEngine:CategoricalDataPoint Value="20"/>
 <chartEngine:CategoricalDataPoint Value="40"/>
 <chartEngine:CategoricalDataPoint Value="35"/>
 <chartEngine:CategoricalDataPoint Value="40"/>
 <chartEngine:CategoricalDataPoint Value="30"/>
 <chartEngine:CategoricalDataPoint Value="50"/>
 </chart:LineSeries.DataPoints>
 </chart:LineSeries>
</chart:RadCartesianChart.Series>

At this point on running application we should get chart as following,

clip_image002

If we want we can add one more series to Chart as following

 <chart:RadCartesianChart.Series>
 <chart:LineSeries Stroke="Orange" StrokeThickness="2">
 <chart:LineSeries.DataPoints>
 <chartEngine:CategoricalDataPoint Value="20"/>
 <chartEngine:CategoricalDataPoint Value="40"/>
 <chartEngine:CategoricalDataPoint Value="35"/>
 <chartEngine:CategoricalDataPoint Value="40"/>
 <chartEngine:CategoricalDataPoint Value="30"/>
 <chartEngine:CategoricalDataPoint Value="50"/>
 </chart:LineSeries.DataPoints>
 </chart:LineSeries>
 <chart:LineSeries Stroke="Red" StrokeThickness="2">
 <chart:LineSeries.DataPoints>
 <chartEngine:CategoricalDataPoint Value="10"/>
 <chartEngine:CategoricalDataPoint Value="20"/>
 <chartEngine:CategoricalDataPoint Value="45"/>
 <chartEngine:CategoricalDataPoint Value="60"/>
 <chartEngine:CategoricalDataPoint Value="50"/>
 <chartEngine:CategoricalDataPoint Value="40"/>
 </chart:LineSeries.DataPoints>
 </chart:LineSeries>

&nbsp;

After adding two series application should render Chart like following,

clip_image002[5]

Step 5: Add Data Point to Chart from Code behind

In previous steps we added Data Points in XAML. We can very much add Data Points at run time. To add data point from code behind let us go ahead and delete data point from XAML. We can add that in code behind as following,

this.chart.Series[0].ItemsSource = new double[] { 20, 30, 50, 10, 60, 40, 20, 80 };
 this.chart.Series[1].ItemsSource = new double[] {10,30,40,60,34,59,20,75 };

In this way we can work with Charts in Windows Phone 8. I hope you find this post useful. Thanks for reading.

 

Join me for the webinar: Developing Applications for Nokia Lumia using Telerik Controls

We are conducting webinar for Windows Phone Developers on 7th March 2013 at 3PM to 4PM IST.

Register for the Webinar here

Learn more about Rad Controls for Windows Phone

clip_image002

Windows Phone application development or creating application for Nokia Lumia devices is keeping a lot of developers very busy. Developers have the envious task of creating quality Windows Phone Application in short span of time. Telerik RadControls for Windows Phone provide the set of controls that significantly speed up the Windows Phone App Development process.

In this webinar we will start with Rad Controls for Windows Phone. We will explore various Rad Controls. We will keep webinar demo oriented and we will more focus on writing and understanding codes. RadControls for Windows Phone provides you different controls and building blocks to cut your development time. These controls are designed to shorten your app development time.

Register for the Webinar here

Learn more about Rad Controls for Windows Phone

See you there in the webinar.

Webinars in India

Webinar Recap : ASP.NET MVC–Better User Experience with Kendo UI

On Feb 28 we at telerik India hosted a webinar for Asia Pacific Region titled “ASP.NET MVC – Better User Experience with Kendo UI”. This blog post will allow you to get a recap of the same in the form of presentation slide deck and video recording

The webinar was an aim at letting you the user know about Kendo UI Web framework and how Kendo UI can work with ASP.NET MVC and improve the user experience of ASP.NET MVC applications. As you know ASP.NET MVC is a pattern based web application development stack from Microsoft and allows complete control over the mark up that gets generated. This means that there is no server control or control state or view state to maintain. You are left with plain HTML markup to play with.

Kendo UI is a HTML5 based client side JavaScript framework. Kendo UI  control supports around 20+ controls which can be instantiated using pure JavaScript coding or using the ASP.NET MVC server side wrappers. With the Server Side wrappers you get the power of JavaScript with productivity of the server. The wrappers make it easy for you and you need not know JavaScript coding at all. The wrapper code makes it easy for you to work with Razor or Webforms engine as it supports both.

Through this webinar – I showcased the use cases of how ASP.NET MVC Wrappers allow you to integrate Kendo UI Web controls with your existing ASP.NET MVC applications and improve the user experience of your apps.

Here is the presentation slide deck used in the webinar:

Here is the video recording of the webinar:

Hope you find this webinar useful and try our Kendo UI ASP.NET MVC Wrappers in your application too.

Till next time – Happy Coding.

Telerik conducted Cross Platform Mobile Application Development workshop for students in India office

View Photos from Workshop here

Download Icenium from here

Cross Platform Mobile Application Development or Hybrid Application development is gaining huge popularity among mobile application developers. Seeing popularity of this paradigm we at Telerik decided to educate about Hybrid App Development to college students. We conducted 8 hrs. Regress training session for 13 students on 2nd March 2013 in our India office.

image

To select students we asked them two simple questions,

  1. Where is head office of Telerik ?
  2. Why we should select you for the workshop ?

There were more than 80 students who shown interest in attending workshop. We chosen 13 out of them. Event started at 11 am . Workshop was scheduled till 6 pm but seeing high energy and enthuse of students , we extended workshop by 2 hrs more. Workshop got over at 8pm.

Students learnt mainly on following topics and created two hybrid apps titled “Twitter Search “ and “Indian States”

  • Icenium IDE
  • Kendo UI Mobile
  • Difference between Native Apps and Hybrid Apps
  • Design guidelines for Hybrid App

image

Day started with keynote session by Telerik Country manger Abhishek Kant. He did set up dais for the day . Students got charged and motivated for day long coding after interaction with him.

image

As day progressed students learnt about various aspect of Hybrid App development paradigm. They created app using Icenium and Kendo UI Mobile.

All 13 students created these two Hybrid Apps

  1. Twitter Search Application
  2. Indian State App

In order to create these two apps students learnt about ,

  • Working with Kendo UI data source
  • Working with Kendo UI Mobile ListView
  • Working with Kendo UI Template
  • Understanding Icenium IDE
  • Building and packaging app using Icenium
  • Certificate management in Icenium
  • Creating APK package using Icenium.

It was a learning day for young students with lot of fun. There was visible happiness on each face when they installed APK package on their Android devices. They were on blue sky seeing app created by them running on their devices.

image

For us it was great day intercating and tecahing young students on latest of the mobile app development paradigm. We are excited for more of these types of events.

View Photos from Workshop here

Download Icenium from here

How to work on Icenium using Facebook account

In this post we will take a look on working on Icenium Graphite using Facebook account. We will start from downloading then installation. After successful installation we will create a Hybrid Application project using Facebook credentials.

Follow the steps given below,

Step 1

To start installing first navigate to http://icenium.com and click on Try now Free until May!

clip_image001

Step 2

You will be provided with three options. Go ahead and select ICENIUM Graphite. Check on Term and Condition and click on Launch App. You will find set would have been started downloading.

clip_image003

Step 3

Navigate to folder in which setup got downloaded. Click on Icenium Graphite setup to start installation.

clip_image004

On installation you will find Graphite is being downloaded.

clip_image005

Step 4

After successful installation of Icenium Graphite you will get dashboard. You can login to Icenium with any of the options provide. Let us login with Facebook credential.

clip_image007

After successful login on dashboard you will find different options to create New Cross-Platform Device Application.

clip_image009

In this way you can download, install Icenium Graphite and start creating Hybrid Applications using your Facebook credentials. I hope you find this post useful. Thanks for reading.