Download Slides and Source Codes from Rad Controls for Windows Phone Webinar

Download Resources of the webinar from here

Thank you so much for attending Webinar: Telerik Tools for Ninja Developers: RadControls fot Windows Phone . I hope it was useful. If you have not done it yet then I strongly recommend you to download free trial and start playing around Rad Controls for Windows Phone. You will find more resources at below given links

Download trial from here

Demos on Rad Controls

Resources on Rad Controls for Windows Phone

Documentation on Rad Controls for Windows Phone

Forum for Rad Controls for Windows Phone

In webinar we started from downloading and installing of Rad Controls. We did walkthrough of all popular Rad Controls and discussed in detail about

  • RadConversationView control
  • RadCalendar control
  • RadSlideView control
  • RadAutoComplete control

Download Resources of the webinar from here

If you need more information and any assistance then please feel free to get connected with me at @debug_mode or send me mail on Dhananjay.kumar@telerik.com . Thanks once again for attending the webinar.

Advertisements

Working with RadSlideHubTile for Windows Phone

In this post we will learn working with RadSlideHubTile. This control allows you to have Windows Phone home screen tile experience inside your application. This tile is used to display information with image. You can associate tap or doubletap event with individual slide hub tile to perform specific operation. To have better immersive experience put RadSlideHubTile in a RadUniformGrid. At the end of this post we are going to have RadSlideHubTile in application as following image

image

To start with add Telerik.Windows.Controls.Primtives namespace on the xaml.

image

After adding namespace put a RadUniformGrid on the application page. We are creating uniform Grid of 3 rows and 3 columns.

image

Inside the Grid we will put RadSlideHubTiles. Since grid is of 3 rows and 3 columns, so we can put 9 RadSlideHubTiles.

We can create a RadSlideHubTiles as following

image

We need to provide Title and Picture values to create RadSlideHubTiles. We can see that Title property is set to India and Picture property is set an image url. We can put 9 RadSlideHubTiles in the grid. We can put that as following


<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="BROWSE COUNTRY APP" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="countries" 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:RadUniformGrid NumberOfColumns="3" NumberOfRows="3">
<telerikPrimitives:RadSlideHubTile x:Name="hbIndia"
Title="India"
>
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\indiaflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbFrance"
Title="France"
>
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\franceflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbEngland"
Title="England"
Tap="hbTextBox_Tap">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\englandflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbGermany"
Title="Germany">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\germanyflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbAustralia"
Title="Australia">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\ausflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbChina"
Title="China">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\chinaflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbJapana"
Title="Japan">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\japanflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbBrazil"
Title="Brazil">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\brazilflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbUSA"
Title="USA">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\usaflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>

</telerikPrimitives:RadUniformGrid>
</Grid>
</Grid>

</phone:PhoneApplicationPage>

When you run the application you should get tiles inside your application and you can handle tap or doubletap event to perform specific task on the particular RadSlideHubTile. Expected output of your application is as following

image

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

Working with RadConversationView Control for Windows Phone

In this post we will learn to work with control for Windows Phone. This control allows you to get exact immersive experience of native Messaging Application in your own application.

RadConversationView gives UI experience as following image. By default it takes accent color set on the device.

image

To start working with this control first thing you need to do is to add reference of Telerik.Windows.Controls.Data on the XAML page. You can add reference as following.

image

After adding reference, you can put control on XAML as following

image

You see that we are binding ItemSource property of RadConversationView in the same way we bind ListView control. After putting RadConversationView on the XAML, we need to create Conversation Message. ConversationViewMessage is used to create conversation message. However you can create custom message and bind to RadConversationView as well. You can create an incoming message as following,

image

You need to pass following parameter in the constructor of ConversationViewMessage to create a message.

  1. Message as string
  2. Time at message sent or receive as DateTime
  3. Type of the message that whether it is outgoing message or incoming message.

You can create an outgoing message as following

image

To show messages in RadConversationView control, you need to add all messages in an observable collection and bind the collection to the control. You can do that as following

image

After creating observable collection you need to bind the collection to itemsource property of RadConversationView. You can add new message by handling SendingMessage event

image

And in ConversationViewSendingMessage function a message can be added as given in below.

image

RadConversationView control is very flexible and you can also perform following tasks.

  • Change the outgoing message template
  • Change the incoming message template
  • Create and bind custom message
  • Create another message types than outgoing and incoming
  • Grouping of the message on an arbitrary criteria

In this way you can harness features of RadConversationView in creating killer Windows Phone application. For your reference full source code of above discussion is given below,

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:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
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="Messages" 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">

<telerikData:RadConversationView ItemsSource="{Binding}"
x:Name="conversationView"/>

</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 System.Collections.ObjectModel;
using Telerik.Windows.Controls;

namespace Demo
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
ObservableCollection<ConversationViewMessage> messages =
new ObservableCollection<ConversationViewMessage>();
public MainPage()
{
InitializeComponent();
ConversationViewMessage msg = new ConversationViewMessage("Hello there",
DateTime.Now,
ConversationViewMessageType.Outgoing);
messages.Add(msg);

msg = new ConversationViewMessage("wow what's up?",
DateTime.Now.AddSeconds(5),
ConversationViewMessageType.Incoming);
messages.Add(msg);

msg = new ConversationViewMessage("Going good ... you say what about Coffee this Saturday ???.", DateTime.Now.AddSeconds(10), ConversationViewMessageType.Outgoing);
messages.Add(msg);

msg = new ConversationViewMessage("Hmmmmm !!!! le'm check my plans", DateTime.Now.AddSeconds(15), ConversationViewMessageType.Incoming);
messages.Add(msg);

this.DataContext = messages;
this.conversationView.SendingMessage +=
new EventHandler<ConversationViewMessageEventArgs>(ConversationViewSendingMessage);
}

void ConversationViewSendingMessage(object sender, ConversationViewMessageEventArgs e)
{

messages.Add((ConversationViewMessage) e.Message);
}

private object CreateMessage(string messageText, ConversationViewMessageType type)
{
return new ConversationViewMessage(messageText, DateTime.Now.AddSeconds(5), type);
}
}
}

When you run above application you should get output as following

image

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

Getting Started With Rad Controls for Windows Phone

This post will help you to start working with Telerik Rad Controls for Windows Phone. You can download trial version from here

Learn more about Rad Controls for Windows Phone here

After downloading click on the exe file. You will get Telerik Control Panel as following . Select Windows Phone and click on proceed.

image

If you want you can change default installation folder on this screen or can leave the default. Accept the Terms and Conditions and click on Proceed.

image image

After successfully installation, go ahead and create new Windows Phone project in Visual Studio. In Silverlight for Windows Phone tab you will get Rad Control Windows Phone Application project template

image

As usual choose Target version of Windows Phone operating system

image

In next windows you need to select Telerik Rad Control for Windows Phone references. Select required reference for the Rad Control you are going to use in the application. I am going to use RadHubTile in the application and for that, we need following references.

image

After adding references, you need to choose type of Windows Phone Application from the drop down. I am choosing simple Windows Phone Application. You can check the checkbox to add Application Bar in the application.

image

Click on Finish to create Windows Phone Application project. After creation of project to work with Rad Controls you need to add references on the XAML page.

image

After adding reference you can work with any RadControl. For example you can add RadHubTile on the application page as following

image

At the point if you run the application, you should be getting application with RadHubTile as following.

image

Conclusion

In this way you can set up environment to start developing Windows Phone Applications using Telerik Rad Controls for Windows Phone. In further posts we will get deeper into capabilities of all the Rad Controls.