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.

About these ads

One thought on “Working with RadConversationView Control for Windows Phone

  1. Pingback: Working with RadConversationView Control for Windows Phone

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s