Webinar: Telerik Tools for Ninja Developers: RadControls for Windows Phone

 

Date: 5th Sep 2012

Time: 3:00 pm to 4:00 pm (IST)

Register here to attend the webinar

Any query mail me @ Dhananjay.kumar@telerik.com

Telerik India has started a webinar series in India time zone to create more awareness about Telerik products. So far four webinars have been conducted and large numbers of developers, designers and testers got benefited by that.

Find full schedule of the webinars here

Continuing the series, on 5th September 2012, we are conducing webinar on Rad Controls for Windows Phone to help Windows Phone developer community.

image

Windows Phone application development 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.

Find more about RadControls for Windows Phone here

Register here to attend the webinar

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. I strongly recommend you to download and install trial before coming to webinar.

RadControls for Windows Phone provides you 41 different controls and building blocks to cut your development time. These controls are designed to shorten your app development time. We will explore some of the controls listed below in the webinar.

  • RadConversationView
  • RadAutoCompleteBox
  • RadTextBox
  • RadToggleSwitch
  • RadSlideHubTiles
  • RadRating
  • RadHubTiles etc .

Apart from above listed RadControls, we will explore many other controls as well. I request you to attend the webinar. Once again find the webinar details below,

Date: 5th Sep 2012

Time: 3:00 pm to 4:00 pm (IST)

Register here to attend the webinar

See you in the webinar. If you have any question or query , please feel free to send me mail at Dhananjay.kumar@telerik.com

Updating Count Value of RadHubTile in using BackGroundWorker

While working on one of the application, I came across a requirement to keep updating count value of RadHubTile in Windows Phone. I had RadHubTile declared on XAML as following

 


<telerikPrimitives:RadHubTile Title="News"
ImageSource="Images\news.png"
Count="11"
Message="News Update"
Width="400"
x:Name="newshubtile">
<telerikPrimitives:RadHubTile.BackContent>
<Border Background="{StaticResource PhoneAccentBrush}">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="News mashup!!"/>
</Border>
</telerikPrimitives:RadHubTile.BackContent>
</telerikPrimitives:RadHubTile>

If you notice in above declaration, we have set value initial of Count Property to 11. Now we need to update value of count on different thread. We can do that using BackGroundWoker. Suppose we have function to update count value as following

 


private void increaseCountValue()
{

newshubtile.Count = newshubtile.Count + 2;

}

Now we need to execute this function in BackgroundWoker. In below function, we are passing two input parameters

  1. Function as Action
  2. Delay in msecond

We are creating instance of BackgroundWorker and calling the function asynchronously on different thread than UI thread.


private void UpdateUsingBackgroundWoker(Action updateMethod, int delayInMilliseconds)
{
BackgroundWorker worker = new BackgroundWorker();
worker.DoWork += (s, e) => Thread.Sleep(delayInMilliseconds);
worker.RunWorkerCompleted += (s, e) => updateMethod.Invoke();
worker.RunWorkerAsync();

}

Last but not least we need to call UpdateIUsingBackgroundEWorker as per our requirement. We can call this as following


this.UpdateUsingBackgroundWoker(() => increaseCountValue(), 1000);

This will update count value in delay of 1 second. In this way you can update count value. I hope you find this post useful. Thanks for reading!

Chart Types supported by RadHtmlChart for ASP.NET AJAX

One of the new controls released as part of the Q2 2012 release for ASP.NET AJAX is RadHtmlChart. We at Telerik think that RadHtmlChart is a powerful Data Visualization tool out of the box for your applications.

Charts overview

RadHtmlChart is built on top of HTML5 and renders the chart as SVG when viewed on modern browsers and  renders the chart as VML in older browsers. It provides a flexible data binding options and a remarkable performance.

In this post we will spend some time getting a first look at different chart types supported by this control. RadHtmlChart supports the following 6 chart types at the moment:

  • Bar Chart
  • Column Chart
  • Line Chart
  • Pie Chart
  • Scatter Chart
  • Scatter Line Chart

Let us take closer look at each of the above chart types.

Bar Chart:

The Bar Chart shows the data as horizontal bars whose lengths vary according to their value. These types of charts are useful for showing a comparison between several sets of data. Each series will be colored differently automatically for easier reading.

htmlchart-barchart-simple-example

Bar Chart allows you as a developer to fully customize it according to your needs.

Column Chart:

Unlike Bar Chart, the Column Chart shows the data as vertical bars. The length of the bars vary according to their value. Similar to Bar Chart this chart is also useful for showing comparisons between several sets of data. Pretty much similar to Bar Chart and can be fully customized to your needs.

htmlchart-columnchart-simple-example

Line Chart:

Line Chart shows the data as a continuous line that pass through points defined by their item’s value. These types of charts are useful in showing trends over time and can be used to compare several sets of same data. Again this chart is also fully customizable to your needs.

htmlchart-linechart-simple-example

Pie Chart:

The Pie Chart displays the data  as sectors from a circle. These types of charts are useful for displaying data as parts of a whole. This chart displays a single series of data in a two dimensional circle.

htmlchart-piechart-simple-example

Scatter Chart:

The Scatter Chart as the name goes scatters points on X and Y axis. It shows the data as points defined by their item’s value. The X axis in Scatter Chart is also numerical and does not require items. Scatter Charts are useful in showing relations between different sets of data for example scientific or experimental results. Again this can be fully customized according to your requirements.

htmlchart-scatterchart-simple-example

Scatter Line Chart:

The Scatter Line Chart is very similar to Scatter Chart. This also shows data as points defined by their item’s values. X axis is also numerical and does not require any items. Difference between Scatter and Scatter Line chart is that the subsequent points are connected with lines. Thus it will account for any missing values in a series. A very useful chart when comparing two sets of data which are different in nature or can be used in scenarios where you have 2 numerical axes on a line type chart. Similar to all other charts this can be customized too.

htmlchart-scatterlinechart-simple-example

In this post I just wanted to cover the different charting options that is provided by the new RadHtmlChart for ASP.NET AJAX. If you have a charting requirements I think this will play well due to the fact that this follows HTML5 standards and pretty much all the new modern browsers have embraced HTML5 quite well. Hope you have got an idea of the different options available as part of this control and you are ready to try them out. I will be covering another series of post on how to create each of these report in a future post. The RadControls for ASP.NET AJAX is available for a free 30 day trial. So what you waiting for – go ahead, download and play with it.

image

Start working with RadRating control for Windows Phone in three simple steps

Read more here

As name suggests by using RadRating controls, you can allow your application user to rate something. RadRating control allows user to select a value from set of rating items. RadRating control may give immersive experience as given below.

image

In this post we will follow three steps to start working with RadRating control.

Step 1

Start with adding namespace on xaml

image

Step 2

You can add a RadRating control by declaring it on xaml as following. You need to set value of AutoGeneratedItemsCount property to set number of rating items.

image

Expected output of above declaration should be as following

image

If you want you can change geometrical shape of the rating items as well. You need to set value of ItemShapeStyle property.There are five geometric shapes are provided. They are as following

  1. Stars1
  2. Stars2
  3. Hearts1
  4. Hearts2
  5. Hearts3

You can set Height and Width of the Rating Item using ItemShapeHeight and ItemShapeWidth property respectively.

In below declaration we are setting shape style, shape height and shape width.

image

Expected output of above RadRating control declaration is as following

image

If you want you can customize individual rating item also. You can do that as following. You may have content for each individual rating item.

image

Expected output of above RadRating control declaration is as following

image

Step 3

In last step you may want to handle events to perform operation when user is changing the rating. Below two events are important to track when user is changing rating or rating has been changed already.

  • ValueChanged
  • ValueChanging

You can handle ValueChanged event as following. In this event you get both old value and new value from the RadRating control

image

Conclusion

These are three simple steps you required to start working with RadRating control. Below I am consolidating codes from above discussion

MainPage.xaml

 


<phone:PhoneApplicationPage
x:Class="processapp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Demo App" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="rating control" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel Orientation="Vertical" Grid.Row="0">
<telerikInput:RadRating x:Name="rdRatingControl"
AutoGeneratedItemsCount="5" />
<TextBlock x:Name="txtrating1" Style="{StaticResource PhoneTextNormalStyle}" />
</StackPanel>

<StackPanel Orientation="Vertical" Grid.Row="1">

<telerikInput:RadRating x:Name="rdRatingControl1"
AutoGeneratedItemsCount="5"
ItemShapeStyle="Hearts1"
ItemShapeHeight="60"
ItemShapeWidth="70"
/>
<TextBlock x:Name="txtrating2" Style="{StaticResource PhoneTextNormalStyle}" />

</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="2" >
<telerikInput:RadRating  x:Name="rdRating" >
<telerikInput:RadRatingItem Content="poor "/>
<telerikInput:RadRatingItem Content="satisfied "/>
<telerikInput:RadRatingItem Content="good "/>
<telerikInput:RadRatingItem Content="verygood "/>
<telerikInput:RadRatingItem Content="excelent"/>
</telerikInput:RadRating>
<TextBlock x:Name="txtrating3" Style="{StaticResource PhoneTextNormalStyle}" />
</StackPanel>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

MainPage.xaml.cs

 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Telerik.Windows.Controls;

namespace processapp
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
rdRating.ValueChanged += new EventHandler<ValueChangedEventArgs<object>>(rdRating_ValueChanged);
rdRatingControl.ValueChanged += new EventHandler<ValueChangedEventArgs<object>>(rdRatingControl_ValueChanged);
rdRatingControl1.ValueChanged += new EventHandler<ValueChangedEventArgs<object>>(rdRatingControl1_ValueChanged);

}

void rdRatingControl1_ValueChanged(object sender, ValueChangedEventArgs<object> e)
{
var oldValue = e.OldValue;
var newValue = e.NewValue;
string message = "you have changed value from " + oldValue + "to " + newValue;
txtrating2.Text = message;
}

void rdRating_ValueChanged(object sender, ValueChangedEventArgs<object> e)
{
var oldValue = e.OldValue;
var newValue = e.NewValue;
string message = "you have changed value from " + oldValue + "to " + newValue;
txtrating3.Text = message;
}

void rdRatingControl_ValueChanged(object sender, ValueChangedEventArgs<object> e)
{

var oldValue = e.OldValue;
var newValue = e.NewValue;
string message = "you have changed value from " + oldValue + "to " + newValue;
txtrating1.Text = message;
}

}
}

When you run application you should have application with RadRating control as following

clip_image002

I hope you find this post useful. Thanks for reading.

RadControls for Web – New controls in Q2 release

We at Telerik shipped our second release of the year which we call it as Q2 release, in June 2012. In this post we will look at what are the new controls available under RadControls for Web which includes ASP.NET AJAX, ASP.NET MVC and Silverlight.

RadControls for Web consists of the following suites:

  • RadControls for ASP.NET AJAX
  • RadControls for ASP.NET MVC
  • RadControls for Silverlight

So lets look at new controls added in Q2 release one by one.


RadControls for ASP.NET AJAX:

This suite is a complete ASP.NET AJAX development toolset. RadControls for ASP.NET AJAX contains over 70 controls and helps in rapid component based UI development. In Q2 2012 release we have added 3 new controls. They are:

  • HTML5 Chart
  • BarCode
  • ODataDataSource

image

HTML Chart:

HTML5 Chart

HTML5 Chart control also known as RadHtmlChart provides a powerful charting mechanism. The charts are based on SVG format for modern browsers and VML for older browsers. Here are some of the salient features of HTML5 Chart control:

  • Client Side Rendering – Rendered entirely through JavaScript and hence reduces the amount of work to be done by Server. Only serialized data is sent to the client which boosts the performance of the application.
  • Control Data Loading – You have the full control over the data loading process. Load the data after page is loaded or invoke a callback via JavaScript.
  • Customize Appearance – The markup structure exposes all properties necessary to customize the appearance.

See Demos

Barcode:

Barcode control enables you to quickly and easily create industry standard barcode formats to your applications. Here again the barcode is generated in SVG format for modern browsers and VML format for older browsers.

See Demos

ODataDataSource:

ODataDataSource control enables you to codelessly bind your controls to OData Services.This control supports a Visual Studio design time wizard to query any Odata service supporting JSON and XML. So you can visualize the data even before you binding it. As said earlier this allows you to codelessly bind the odata services to controls like TreeView, Grid etc,

See Demos

 


RadControls for ASP.NET MVC:

With Q2 release we no longer promote the ASP.NET MVC extensions, rather we advice you to migrate to our new breed of UI framework known as Kendo UI which composes of Web, DataVisualization and Mobile contols. Kendo UI is the new platform for HTML5/JavaScript development. Kendo UI Web controls also comes with server side wrappers for ASP.NET MVC for easier development. You can know more about Kendo UI at www.kendoui.com.

In Q2 release 1 new widget was added to Kendo UI Web suite.

DateTimePicker:

As the name goes this is a UI widget which allows you to select Date as well as time within in one single widget/control. If your scenario requires for a Date and Time to be shown, this control can be used instead of two controls – one to show Date and another to show Time.

image image

See Demos


RadControls for Silverlight:

This suite is one of the industry’s leading suite of Silverlight controls for today’s Line Of Business (LOB) application development. RadControls for Silverlight helps you to create engaging and interactive user experiences for Web and Desktop. This suite contains over 65 controls which will surely cut your development time.

In Q2 release, there were 2 new controls added to the suite. They are:

  • RadHeatMap
  • RadGanttView

RadHeatMap:

Heat Map control is a matrix like control that uses color to encode values along two axes. Some of the features of this controls are:

  • Interactive tool tips – provides context aware detail on the heat map
  • Colorizers – allows you to use different colors to encode values
  • Super fast rendering – uses immediate mode bitmap based rendering and proprietary hit-testing and lay outing to render vast amount of visual detail without slowing down and sacrificing the interactivity

HeatMap

See Demos

RadGanttView:

This control as the name goes, allows you to visualize and manage hierarchical project data as a Gantt Chart. This has the capability to visualize different types of project data such as Tasks, Milestones, Summaries, and also the relations between them. You can highlight different types of important items like late or critical tasks. Another feature of the control is the ability to import data from your MS project and visualize it in a friendly way.

image

See Demos

Summary:

In this post we looked at new controls released as part of the Q2 Release under RadControls for Web suite. We looked at 3 core technologies under Web i.e. ASP.NET AJAX, ASP.NET MVC and Silverlight – and looked at the new controls available under each of those suites, Hope you are excited to try these new controls yourselves. Don’t forget that all these controls suites are available for free 30 Day trial downloads.

Three simple steps to start working with RadToggleSwitch for Windows Phone

In this post we will learn to use RadToggleSwitch in three simple steps. RadToggleSwitch controls gives you experience of on and off button. It is a binary state control and can be either in state of on or off. You may get experience of RadToggleSwitch as following

image

Follow the below steps to start working with RadToggleSwitch. This control is very much configurable and you can put button and header styling as per your application requirement.

Step1

Very first you need to add reference of Telerik.Windows.Controls.Primptive on xaml.

image

Step 2

After adding namespace add RadToggleSwitch on the application page. You can add that as following

image

While adding RadToggleSwitch we can configure value of header. If needed, you can define HeaderStyle and HeaderTemplate specific to your application. By default accent color of device get applied as background color of RadToggleSwitch. You can set IsChecked property to either true or false. If you do not set it then it takes default value false. One important property is ButtonStyle. You can configure this property to give different look to toggle button.

Below is the consolidated code. On the xaml we have put four RadToggleSwitch control.


<phone:PhoneApplicationPage
x:Class="processapp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Demo App" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="toggle switch" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<telerikPrimitives:RadToggleSwitch
x:Name="tglWifi"
Header="WiFi"
Grid.Row="0"
/>
<telerikPrimitives:RadToggleSwitch
x:Name="tglBlueTooth"
Header="BlueTooth"
Grid.Row="1"
IsChecked="True"/>

<telerikPrimitives:RadToggleSwitch
x:Name="tglDataNetwrok"
Header="Cellular Data"
Grid.Row="2"
IsChecked="True"/>

<telerikPrimitives:RadToggleSwitch
x:Name="tglSharing"
Header="Sharing"
Grid.Row="3"
IsChecked="False"/>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

Step 3

You can handle check and uncheck event on RadToggleSwitch. You can perform operation corresponding to on in check event and corresponding to off in uncheck event. For example in below code I am changing header of the RadToggleSwitch in check and uncheck event

image

And we have attached the event to RadToggleSwitch in constructor of the page as given below,

image

Output

When you run above application you should get expected output as following. When you toggle Data Sharing button, you will notice header is getting changed.

image

In this way you can work with RadToggleSwitch. I hope you find this post useful. Thanks for reading.

How to work with RadTextBox for Windows Phone

Read documentation here

RadTextBox is adding below functionalities in usual TextBox. Those functionalities are

  • Watermark
  • Validation
  • Clear Button
  • Action Button
  • Headers

You may have immersive experience of a RadTextBox as following

image

To start working with RadTextBox very first you need to add namespace on XAML as following

image

After adding namespace you need to put RadTextBox on xaml. Explicitly you need to set ActionButtonVisibility property as visible.

image

Clear button will only be visible once you start typing the text. ActionButtonTap event gets called when action button gets tapped. You can set watermark as following

image

On running you should get RadTextBox as below

image

If you want you can change style of clear and action button. Header of the RadTextBox can bind to a data source as following

image

And in the code behind

image

And Data class is defined as following

image

You should be getting RadTextBox experience as following. You will notice that header has been data bind now.

image

One of the most important features of RadTextBox is validation capabilities. You may want to perform some validation on the lost focus. To start with validation you need to add namespace

image

ValidationState enum is used to specify validation state on RadTextBox. There are four possible value of ValidationState

image

You can validate as following

image

Validate is user defined function and you may defined it as per your business requirement. Validation message will be displayed as following

image

image

In this way you can work with RadTextBox. Below is the consolidated code of all discussion from this post

MainPage.xaml


<phone:PhoneApplicationPage
x:Class="Demo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikSlideView="clr-namespace:Telerik.Windows.Controls.SlideView;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:telerikDataVisualization="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="DEMO RAD CONTROLS" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Autocomplete" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<telerikPrimitives:RadTextBox x:Name="rdTextBox" Height="110"
ActionButtonVisibility="Visible"
Header="{Binding Name}"
Watermark="Search"
ActionButtonTap="RadTextBox_ActionButtonTap"
/>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

MainPage.xaml.cs

 

</pre>
using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Net;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using System.Windows.Shapes;
 using Microsoft.Phone.Controls;
 using System.Collections.ObjectModel;
 using Telerik.Windows.Controls;
 using System.Windows.Media.Imaging;
 using System.Xml.Linq;
 using Telerik.Windows.Controls.PhoneTextBox;

namespace Demo
 {
 public partial class MainPage : PhoneApplicationPage
 {

public MainPage()
 {
 InitializeComponent();
 this.rdTextBox.DataContext = new Data { Name = "I am  data bind Header" };
 rdTextBox.LostFocus += new RoutedEventHandler(rdTextBox_LostFocus);

}

void rdTextBox_LostFocus(object sender, RoutedEventArgs e)
 {

bool isValid = Validate(rdTextBox.Text);
 if (isValid)
 {
 rdTextBox.ChangeValidationState(ValidationState.Valid, "Wow valid input!");
 }
 else
 {
 rdTextBox.ChangeValidationState(ValidationState.Invalid, "Oops InValid input!");
 }

}

private bool Validate(string text)
 {
 //Your validation logic
 return false;
 }

private void RadTextBox_ActionButtonTap(object sender, EventArgs e)
 {

MessageBox.Show("Hello");

}

}
 public  class Data
 {
 public string Name { get; set; }
 }

}

&nbsp;
<pre>

I hope you find this post useful. Thanks for reading.

Complex object in RadAutoCompleteBox control for Windows Phone

Read documentation here

RadAutoCompleteBox control provides suggestion to user. It provides suggestion on basis of set criteria filtering data from a SuggestionSource. SuggestionSource is nothing but a Data Source.

RadAutoCompleteBox control gives you immersive experience as following. It can be bind to data source as simple as collection of strings or collection of complex objects. In below RadAutoCompleteBox SuggestionSource is of complex objects.

image

To start working with RadAutoCompleteBox first you need to add following namespace on the XAML page.

clip_image002

You can create a simple RadAutoCompleteBox as following

image

There are many properties exposed to configure RadAutoCompleteBox. You can set values of those properties as per your requirement. Two important properties are AutoCompleteMode and AutoCompletePopupDisplayMode. AutoCompleteMode property defines the way filtering should be done. Filtering criteria will be can be set to two values.

image

AutoCompletePopupDisplayMode defines the place of popup windows to open. This property can be set to four values. Those four values are as following

image

SuggestionSource can be created as following. It is a function returning List of Strings.

image

After creating SuggestionSource you can set that in code behind as given below.

image

At this point on running the application, you should get experience of RadAutoCompleteBox as given in below image,

image

Now let us see how we can work with a complex object. For that go ahead and create a class called CountryData. There are three properties in the class.

 


public class CountryData
{

public string CountryName { get; set; }
public string  CountryCapital { get; set; }
public ImageSource CountryFlag { get; set; }

}

Next you need to create data source or suggestion source. For that I have created a function returning List of CountryData. I have put images in the Images folder. In below function using collection initializer we are creating List of object of CountryData and returning that.


private List<CountryData> GetCountryDetails()
{
List<CountryData> lstCountryData = new List<CountryData>
{
new CountryData
{
CountryName = "India" , CountryCapital ="New Delhi " , CountryFlag= GetImageSource("/Images/indiaflag.jpg")
},
new CountryData
{
CountryName = "USA" , CountryCapital ="Washington" , CountryFlag= GetImageSource("/Images/usaflag.jpg")
},
new CountryData
{
CountryName = "France" , CountryCapital ="Paris" , CountryFlag= GetImageSource("/Images/franceflag.jpg")
},
new CountryData
{
CountryName = "England" , CountryCapital ="London" , CountryFlag= GetImageSource("/Images/englandflag.jpg")
},
new CountryData
{
CountryName = "Germany" , CountryCapital ="Berlin" , CountryFlag= GetImageSource("/Images/germanyflag.jpg")
},
new CountryData
{
CountryName = "China" , CountryCapital ="Shanghai" , CountryFlag= GetImageSource("/Images/chinaflag.jpg")
},
new CountryData
{
CountryName = "Japan" , CountryCapital ="Tokyo" , CountryFlag= GetImageSource("/Images/japanflag.jpg")
},
new CountryData
{
CountryName = "Australia" , CountryCapital ="Canberra" , CountryFlag= GetImageSource("/Images/ausflag.jpg")
},
new CountryData
{
CountryName = "Brazil" , CountryCapital ="Rio" , CountryFlag= GetImageSource("/Images/brazilflag.jpg")
},

};
return lstCountryData;
}

GetImageSource function is defined as following. This function is taking image path as string and converting that to ImageSource such that directly can be bind to Image control.

 


private ImageSource GetImageSource(string fileName)
{
return new BitmapImage(new Uri(fileName, UriKind.Relative));
}

Finally you need to set SuggestionSource of radAutoCompleteBox. You can set that in page constructor as given below,

 


public MainPage()
{
InitializeComponent();
this.radAutoCompleteBox.SuggestionsSource = GetCountryDetails();

}

Now you need to put radAutoCompleteBox on xaml. We are filtering on a SuggestionSource consist of complex objects so you need to set the value of property FilterKeyPath. You can set value of this property to any property of the object. In this case we are filtering on CountryName. SuggestionSelected event gets fired when user selects an item from the popup.

image

By now you have created radAutoCompleteBox and bind to a SuggestionSource of complex objects. Next we need to create SuggestionTemplate. SuggetionTemplate defines the way data from complex object bind as SuggestionSource will be displayed in the suggestion popup. Since there are three properties in the object and one of them is an image. So simply we have put a StackPanel with horizontal orientation and binding properties value in controls inside the StackPanel.

image

Last but not least we want items highlighting on filtering. We want to highlight item on property set as FilterKeyPath. We set CountryName as FilterKeyPath. You can highlight item on filtering as following. You can set highlight style on background or foreground.

image

Consolidating codes from above discussion you will have XAML as following. There is one StackPanel in second row of Grid. On selection of an item, that item will get displayed in controls inside StackPanel.

 


<phone:PhoneApplicationPage
x:Class="Demo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="DEMO RAD CONTROLS" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Autocomplete" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />

</Grid.RowDefinitions>

<telerikInput:RadAutoCompleteBox x:Name="radAutoCompleteBox"
Height="100"
AutoCompleteMode="Contains"
FilterKeyPath="CountryName"
SuggestionSelected="radAutoCompleteBox_SuggestionSelected"
Margin="-6,19,6,185">

<telerikInput:RadAutoCompleteBox.SuggestionItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding CountryFlag}" Height="60" Width="60" />
<TextBlock Text="{Binding CountryName}"
telerikInput:RadAutoCompleteBox.IsElementHighlighted="True">
<telerikInput:RadAutoCompleteBox.HighlightStyle>
<telerikInput:HighlightStyle Foreground="Red" FontSize="26"/>
</telerikInput:RadAutoCompleteBox.HighlightStyle>
</TextBlock>
<TextBlock Text="," />
<TextBlock Text="{Binding CountryCapital}" />
</StackPanel>
</DataTemplate>
</telerikInput:RadAutoCompleteBox.SuggestionItemTemplate>

</telerikInput:RadAutoCompleteBox>

<StackPanel Grid.Row="1" Orientation="Vertical">
<Image x:Name="imgMessage" Height="250" Width="200" />
<TextBlock  x:Name="txtMessage"  FontSize="40" Style="{StaticResource PhoneTextAccentStyle }"/>
</StackPanel>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

Last but not least you need to handle SuggestionSelected event. In this event we will bind selected item in controls inside StackPanel.

 


private void radAutoCompleteBox_SuggestionSelected(object sender, SuggestionSelectedEventArgs e)
{

CountryData data  = e.SelectedSuggestion as CountryData;
radAutoCompleteBox.Text = data.CountryName + "," + data.CountryCapital;
txtMessage.Text = "You selected " + data.CountryName;
imgMessage.Source = data.CountryFlag;
}

Now if you go ahead and run the application you should get experience of radAutoCompleteBox as following

image

In this way you can work with radAutoCompleteBox. I hope you find this post useful. Thanks for reading.

RadControls for Web – And you ask why?


Overview:

In this post, we will quickly look at the factors that will compel you to consider Telerik RadControls as the framework for all your User Interface layers in your projects. So buckle up and let’s go for a ride with Telerik RadControls.



RadControls Defined:

Rad or RAD – stands for Rapid Application Development and RadControls are nothing but controls which help you in Rapid Application Development. Telerik offers over 10 years of aggressive development which includes a set course of 3 releases per year & the Service Packs, has been able to come out with industry leading UI component suite for Microsoft ASP.NET technology which includes AJAX, MVC and Silverlight. There are nearly 175+ controls under the combined umbrella of   AJAX, MVC and Silverlight. The controls themselves, enhance the framework provided controls with a lot of out of the box features. For e.g. If you consider the RadGridView we complement the framework Grid with features such as Filtering, Grouping, Sorting, Paging and export capability. Imagine if you had the onus of writing the paging and export all by yourself. I have been a programmer for close to a decade and I would say it will be like reinventing the wheel. So, with RadControls you just have to worry about your business need and the control complements your requirement with out of the box features.

image     Telerik Extensions for ASP.NET MVC   image


RadControls Decision Factors:

Having known about RadControls and what they are, next question will be – Why should you choose RadControls? Lets quickly run through some of the check list before you decide:

  • You want to develop a professional web application.
  • You want to deliver your application fast to the Client/Market.
  • You want to build apps which adhere to certain standards like Accessibility standards.
  • You want to meet your deadlines and budgets.
  • You want to cut down your development cost and development time.
  • You want to rapidly provide custom software for ever changing needs of clients.
  • You want to quickly create working prototypes.

If you have answered Yes to the above checklist – then – RadControls is what you need. RadControls will help you to achieve all of the above mentioned points in the check list. So I highly recommend you to download a trial and test drive the following RadControls:


RadControls and Developers:

Developer friendliness is one of the important factors for any UI component vendor. Keeping the developers in mind helps Telerik adopt the highest degree of friendliness when it comes to the UI controls. There are three main factors which we think makes a developers life easy when working with our RadControls. They are:

  • Visual Studio Integration – All our suites extend Visual Studio by integrating seamlessly with the Visual Studio toolbox. This allows developers to use the controls quickly by simply dragging and dropping on the working area. Currently we have support for Visual Studio 2012 as well.

 

  • Design Time Wizards – When working with the controls in design time, RadControls provide wizard interfaces on all controls to easily configure the features you need.

 

 

  • Familiarity – Whole of the RadControls framework mirrors the Microsoft .NET framework. So as a developer if you understand the .NET framework, RadControls is no different. So the learning curve is very minimal and you will be able to get on with it in a jiffy.

 


RadControls and Themes:

One of the deciding factors we looked at earlier was that of developing a professional looking web application. What we needed to make our application look like a professional app is style sheets. Be it Web app or Silverlight app, styles play a pivotal role in the look and feel of any User Interface. Most of the developers are not designers – which includes me too :). So the RadControls suite comes to the rescue by way of packaging what we call as Themes i.e. a complete style sheet which adheres to one common color scheme across the controls. The Telerik RadControls suite comes bundled with close to 25+ themes under the combined umbrella of ASP.NET AJAX, MVC and Silverlight. So out of the box we ship 25+ themes to use in your production level application. If that is not enough you can always create your own theme and embed the same in your application. ASP.NET AJAX and MVC suites provide a Visual Theme Builder which can be used to create your custom themes. Here are the links for Visual Theme Builder:


Summary:

Telerik RadControls for Web provides a lot of benefit to enterprises in not only speeding up the development life-cycle but also cuts down on the cost and time of development. It also is developer friendly with seamless Visual Studio integration and design time wizard to help code faster. As said in the previous sections, there are nearly 175+ controls to play around in the area of AJAX, MVC and Silverlight. If that doesn’t excite you then I don’t know what will :). Download the 30 day trial we have and give it a try. I bet you will fall in love with the RadControls.

Till next time – Happy Coding !!!