Telerik UI for Windows Phone by Progress

This topic explores each property of RadConversationView and provides code examples to more clearly illustrate the inteded usage of each property.

Message Templates

The OutgoingMessageTemplate and IncomingMessageTemplate properties are the message templates that should be used for messages that are being sent from and to the device respectively. The default templates are simple rectangles with accent color that have a small triangle which points to the side, like in the Messages app on the Phone. Here's the default outgoing template's xaml:

CopyXAML
<DataTemplate>
    <Grid Margin="12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <primitives:RadPointerContentControl Background="{StaticResource PhoneAccentBrush}"
                                             TargetPoint="-150,-300">
            <primitives:RadPointerContentControl.PointerTemplate>
                <DataTemplate>
                    <Polygon Width="12"
                             Height="24"
                             Points="0,0 12,0 12,12 0,24"
                             StrokeThickness="0"
                             Fill="{StaticResource PhoneAccentBrush}"
                             RenderTransformOrigin="0.5, 0.5">
                        <Polygon.RenderTransform>
                            <ScaleTransform ScaleX="-1"/>
                        </Polygon.RenderTransform>
                    </Polygon>
                </DataTemplate>
            </primitives:RadPointerContentControl.PointerTemplate>

            <StackPanel>
                <TextBlock Text="{Binding Path=Text}"
                           TextWrapping="Wrap"
                           Margin="12"/>
                <TextBlock Text="{Binding Path=TimeStamp}"
                           Margin="12, 0, 12, 12"
                           HorizontalAlignment="Right"/>
            </StackPanel>
        </primitives:RadPointerContentControl>
    </Grid>
</DataTemplate>
This template is used inside the conversation view when OutgoingMessageTemplate is set to null, that is, this is the default outgoing template. When IncomingMessageTemplate is null, its default is used in the same manner. The message templates should be used in two cases. The first case is when developers simply need a different look for their messages. The second, and arguably more common case, is when developers have different models for their messages and need to customize the message templates so that they can bind to the properties of their models. Finally it is important to note that the default templates assume the message models are of type ConversationViewMessage. They bind to ConversationViewMessage's properties and therefore will not work if a custom message is being used. Refer to this help article for an example of how use a custom message model.

MessageTemplateSelector

The MessageTemplateSelector property is used to choose the correct message template for an incoming or outgoing message. When it is set to null, a default implementation is used which assumes the messages are of type ConversationViewMessage. When a custom message model is used, MessageTemplateSelector must be set to a custom DataTemplateSelector which knows how to differentiate the custom message objects. Refer to this help article for an example.

ItemsSource

The ItemsSource property works exactly like the ItemsSource of the ListBox, that is, for data binding. RadConversationView is strictly a data-bound control. Here is an example that binds the conversation view to an ObeservableCollection of ConversationViewMessage objects:

CopyC#
ObservableCollection<ConversationViewMessage> messages = new ObservableCollection<ConversationViewMessage>();
ConversationViewMessage msg = new ConversationViewMessage("Hello.", DateTime.Now, ConversationViewMessageType.Outgoing);
messages.Add(msg);

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

msg = new ConversationViewMessage("This is aaah... Wikus van de Merwe from District 9. Hello Charlize.", DateTime.Now.AddSeconds(5), ConversationViewMessageType.Outgoing);
messages.Add(msg);

RadConversationView conversationView = new RadConversationView();
conversationView.ItemsSource = messages;

Text

The Text property gets and sets the text of the textbox inside the conversation view.

TextBoxVisiblity

The TextBoxVisibility property determines whether the default conversation view text box is collapsed or visible. Developers can hide the text box if they need a different input method for their application scenario.

TextBoxTemplate

The TextBoxTemplate property allows developers to specify a completely arbitrary DataTempate which will describe the visualization of the conversation view text box part. It must contain a RadTextBox instance with the name "PART_TextBox" in order for the conversation view to work properly. Here is the default template, it should serve well as a starting point for modifications:

CopyXAML
<telerikDataControls:RadConversationView.TextBoxTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="3*"/>
            </Grid.ColumnDefinitions>

            <primitives:RadPointerContentControl Grid.Column="1"
                                             TargetPoint="160, 300">
                <primitives:RadPointerContentControl.PointerTemplate>
                    <DataTemplate>
                        <Polygon Width="12"
                             Height="24"
                             Points="0,0 12,0 12,12"
                             StrokeThickness="0"
                             RenderTransformOrigin="0.5, 0.5"/>
                    </DataTemplate>
                </primitives:RadPointerContentControl.PointerTemplate>

                <telerikPrimitives:RadTextBox x:Name="PART_TextBox"
                                          ActionButtonVisibility="Visible">
                    <telerikPrimitives:RadTextBox.ActionButtonStyle>
                        <Style TargetType="telerikTextBox:TextBoxActionButton">
                            <Setter Property="ButtonType"
                                Value="Custom"/>
                            <Setter Property="RestStateImageSource"
                                Value="/Telerik.Windows.Controls.Data;component/ConversationView/Images/SendIcon.png"/>
                        </Style>
                    </telerikPrimitives:RadTextBox.ActionButtonStyle>
                </telerikPrimitives:RadTextBox>
            </primitives:RadPointerContentControl>
        </Grid>
    </DataTemplate>
</telerikDataControls:RadConversationView.TextBoxTemplate>
Note

The TextBoxActionButton type is in this this namespace: xmlns:telerikTextBox="clr-namespace:Telerik.Windows.Controls.PhoneTextBox;assembly=Telerik.Windows.Controls.Primitives"

CreateMessage

The CreateMessage property is a callback that is used when developers are using the default text box and custom message models. When the text box action button is tapped, RadConversationView first calls the CreateMessage method to get a message instance and then fires the SendingMessage event with the created message. If CreateMessage is set to null, the default implementation creates a ConversationViewMessage object that is then passed in the SendingMessage event arguments. For an example of how the CreateMessage callback is used, please refer to this help article.

Grouping Messages

RadConversationView allows developers to group messages based on arbitrary criteria. The grouping API consists of three properties. These are GroupDescriptors, GroupHeaderTemplate and GroupHeaderTemplateSelector. The grouping API is similar to that of RadJumpList. The GroupDescriptors is an IEnumerable of DataDescriptor. GroupHeaderTemplate determines how the group headers will look and GroupHeaderTemplateSelector is used when a dynamic choice of group header templates is required. For a an example of how to use the grouping API to create a chat-like app, please refer to this help article.