Windows Phone 8

Recap of webinar: Building Windows Phone 8 Apps using Kendo UI

Posted by

1

Download Source Code and Slides from here

clip_image001

On 23rd May 2013, we at Telerik India hosted a webinar on “Building Windows Phone 8 Apps using Kendo UI Mobile”. This webinar received great response from audience and we had around 150 developers attending webinar. Participants were very active during webinar and there were a flood of questions around Windows Phone 8, Coredova and Kendo UI.

We discussed following topics in webinar,

  • What is Hybrid App
  • Why we need Hybrid App
  • Setting Visual Studio2012 to develop Wp8 apps using coredova
  • Setting WP8 App project to work with Kendo UI

In demo part we covered following topics,

  • Creating Kendo Datasource
  • Consuming OData and REST Srervice in Kendo Datasource
  • Working with Kendo Template
  • Working with Layout , Views
  • Working with dynamic navigation

We learnt and experienced that how easily a developer could work with all complexities such that consuming services, navigating between views, working with layouts rendering native to WP 8, adaptive rendering etc. using Kendo UI Mobile.

If you create a Hybrid App for Windows Phone 8 using KendoUI Mobile and Coredova then with minimal or zero effort you can publish same app as iPhone app and Android App.

image

You can watch recorded webinar below,

As you can see in recorded webinar that we focused on writing codes and shown you how easily and quickly a Marketplace ready Windows Phone 8 app can be created using Kendo UI.

Download Source Code and Slides from here

You can revisit presentation of webinar below,

If you want us to do webinar on a particular topic related to Telerik products then feel free to send is mail at Dhananjay.kumar@telerik.com

Download Source Code and Slides from here

We had promised that we will be giving away 2 .NET Ninja T-Shirts as a webinar give away.

image

We normally pick 2 people randomly from the audience and raffle it out. So, as part of this webinar we are happy to say that the following 2 people are winners of our .NET Ninja T-Shirts:

  1. Ramu Naik
  2. Ardhendusekhar Kanungo

Congratulations to the winners. We will be contacting you shortly as we need your postal address to ship your t-shirts. Rest of you folks, don’t worry you still have chance to win the t-shirt. Do attend our next webinar which is on May 30 titled – MVVM and Validation with Kendo UI Web. Register for that webinar here

Download Source Code and Slides from here

clip_image001

Advertisement

Download Source codes, Slides and Recording from 7th march Webinar: Developing Applications for Nokia Lumia using Telerik Controls

Posted by

0

On 7th March 2013 we at Telerik India hosted webinar on Developing Applications for Nokia Lumia using Telerik Controls. We appreciate that you joined in. We hope that webinar was useful to you. If you have any further queries, please feel free to reach us.

Learn more about Rad Controls for Windows Phone here

Download trial from here

Download webinar resources from here

In webinar we explored various controls with focus on following three controls.

  • Conversation View
  • QR and Barcodes
  • Different kind of charts

Please find recorded webinar below.

Learn more about Rad Controls for Windows Phone here

Download trial from here

Download webinar resources from here

If you have any query feel free to reach us. You can reach me any time at dhananjay.kumar@telerik.com .

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

Posted by

0

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.

Step by Step working with Telerik Charts in Windows Phone 8

Posted by

3

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.