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.

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.

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

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,

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

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

You can create an outgoing message as following

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

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

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

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