Custom Look on the Chat Control

[Vuyiswa]

 Good Day All

Can someone tell me if its possible to customize the look and feel of the Chat control like as whatsup do. There is a Voice Note and also Emoji button on the left as depicted in the attached image 

[Collin]

@Vuyiswa 

Any luck in solving this issue? I am trying to do something similar. The documentation is sparse in this area. 

[Lance | Manager Technical Support]

Hi Collin,

You would need to override the ControlTemplate. You can see some other suggestions in the official feedback portal item here: Chat: Expose Input Area Template.

In my comment's GitHub link, you could add items around the ChatEntry control in the ControlTemplate, but not edit the ChatEnty control itself (other than inherited features from Entry).

This will probably get you close to what you're looking for you, however, that's as far down as you can go for the overall template at this time.

Here's a screenshot to help guide you:



Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

[Vuyiswa]

hi Collins 

i was able to do it 

.First define the Control Templates , which contains the buttons you want and the layout as you want it like this 

 <ControlTemplate x:Key="CustomChatControlTemplate">
                <Grid telerikInput:KeyboardHelper.IsTranslationTarget="True" 
              RowSpacing="2">
                    
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="chat_background.png"   />

                    <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 Grid.Row="2" BackgroundColor="{TemplateBinding InputAreaBackgroundColor}" Padding="5, 0, 0, 0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <StackLayout  Orientation="Horizontal"   Margin="0, 0, 10, 0"  Grid.Column="1">
                        <telerikInput:RadButton telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                       
                                        BackgroundImage="emoji_grey.png"
                                        BackgroundColor="Transparent"
                               Clicked="btnemoji_Clicked"
                                                x:Name="btnemoji" 
                                        WidthRequest="25"
                                        HeightRequest="25"
                                        VerticalOptions="Center" />

                        <telerikConversationalUI:ChatEntry WidthRequest="200"  x:Name="txtchatmessage"  Focused="txtchatmessage_Focused"  TextChanged="txtchatmessage_TextChanged"   
                    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="btnattach" telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                        BackgroundImage="Attach.png"
                                        BackgroundColor="Transparent" 
                                        WidthRequest="30" 
                                                Clicked="btnattach_Clicked"
                                        HeightRequest="30"
                                        VerticalOptions="Center" />

                            <telerikInput:RadButton x:Name="btncamera_image" telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                        BackgroundImage="camera_black.png"
                                        BackgroundColor="Transparent" 
                                        WidthRequest="30" 
                                                Clicked="btncamera_image_Clicked"
                                        HeightRequest="30"
                                        VerticalOptions="Center" />
                            
                            <telerikInput:RadButton telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                       
                                        BackgroundImage="{TemplateBinding SendMessageButtonImage}"
                                        BackgroundColor="Transparent"
                                        Clicked="chat_send"
                                        x:Name="btnsend"  
                                        WidthRequest="30"
                                        HeightRequest="30"
                                        VerticalOptions="Center" />

                            <telerikInput:RadButton telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}" 
                                        BackgroundImage="microphone.png"
                                        BackgroundColor="Transparent"
                                        Clicked="chat_send"
                                        x:Name="btnvoicenote"  
                                        WidthRequest="30"
                                        HeightRequest="30"
                                        VerticalOptions="Center" />
                            
                        </StackLayout>
                    </Grid>
                </Grid>
            </ControlTemplate> 

and  after you use this template in the control like this 

 

<telerikConversationalUI:RadChat x:Name="chat"  Grid.Row="1" 
                                     local:ChatroomUtils.AuthorsMap="{StaticResource AuthorsMap}"
                                     local:ChatroomUtils.Author="{Binding User}"
                                     ItemConverter="{StaticResource ChatroomMessageConverter}"
                                     ControlTemplate="{StaticResource CustomChatControlTemplate}"
                                     SendMessage="chat_send"> 
            </telerikConversationalUI:RadChat>

 

check the bold part. this will just replace which you will normal have with what you defined in the template