New to Telerik UI for Xamarin? Download free 30-day trial

Control Template

RadChat's visual appearance is defined through a Control Template. In order to customize the way the Conversational UI looks, you would need to take the default ControlTemplate and modify it.

This topic gives an overview of the ControlTemplate of the Chat control, so you can copy it to your app and make changes.

The original ControlTemplate

The XAML defined below relies on the following namespaces to be set:

xmlns:telerikCommon="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common"
xmlns:telerikConversationalUI="clr-namespace:Telerik.XamarinForms.ConversationalUI;assembly=Telerik.XamarinForms.ConversationalUI"
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

Then here is the RadChat default control template. Add it to the Page resources:

<ResourceDictionary>
    <telerikConversationalUI:ChatListViewMarginConverter x:Key="ChatListViewMarginConverter" />

    <ControlTemplate x:Key="RadChat_ControlTemplate">
        <Grid telerikInput:KeyboardHelper.IsTranslationTarget="True"
              RowSpacing="2">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <telerikConversationalUI:ChatListView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                                  AutoScrollMode="{TemplateBinding AutoScrollMode}"
                                                  ScrollMediator="{TemplateBinding ActualScrollMediator}"
                                                  Margin="{Binding Height, Source={x:Reference PickerContainer}, Converter={StaticResource ChatListViewMarginConverter}}"
                                                  ItemTemplate="{TemplateBinding ItemTemplateSelector}" 
                                                  ItemsSource="{TemplateBinding Items}"
                                                  AutomationProperties.Name="ChatListView" />
            <telerikCommon:RadContentView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                          Grid.Row="1"
                                          Content="{TemplateBinding TypingIndicator}" />
            <telerikCommon:RadContentView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                          x:Name="PickerContainer"
                                          VerticalOptions="End"
                                          Content="{TemplateBinding Picker}" />
            <Grid x:Name="PART_InputAreaGrid"
                  Grid.Row="2"
                  Padding="5, 0, 0, 0" 
                  telerikInput:KeyboardHelper.IsTranslationPivot="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <telerikConversationalUI:ChatEntry
                    telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                    Text="{TemplateBinding Message, Mode=TwoWay}"
                    BackgroundColor="Transparent"
                    VerticalOptions="Center"
                    CompletedCommand="{TemplateBinding ActualSendMessageCommand}"
                    FocusMediator="{TemplateBinding FocusMediator}"
                    telerikInput:KeyboardHelper.IsTranslationSource="True" />

                <telerikInput:RadButton x:Name="PART_SendMessageButton"
                                        telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                        Grid.Column="1"
                                        Margin="0, 0, 10, 0"
                                        BackgroundColor="Transparent"
                                        Command="{TemplateBinding ActualSendMessageCommand}"
                                        WidthRequest="30"
                                        HeightRequest="30"
                                        VerticalOptions="Center" />
            </Grid>
        </Grid>
    </ControlTemplate>
</ResourceDictionary>

Finally, use the custom ControlTemplate as a StaticResource on any instance of RadChat:

<telerikConversationalUI:RadChat x:Name="chat"
                                 ControlTemplate="{StaticResource RadChat_ControlTemplate}"/>

See Also

In this article
Not finding the help you need? Improve this article