This is a migrated thread and some comments may be shown as answers.

Custom Look on the Chat Control

3 Answers 49 Views
Chat (Conversational UI)
This is a migrated thread and some comments may be shown as answers.
Vuyiswa
Top achievements
Rank 2
Vuyiswa asked on 26 Nov 2018, 02:23 PM

 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 

3 Answers, 1 is accepted

Sort by
0
Collin
Top achievements
Rank 1
answered on 11 Feb 2019, 06:59 PM

@Vuyiswa 

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

0
Lance | Manager Technical Support
Telerik team
answered on 11 Feb 2019, 11:42 PM
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.

I
n 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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Vuyiswa
Top achievements
Rank 2
answered on 26 Aug 2019, 09:58 PM

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

 

Tags
Chat (Conversational UI)
Asked by
Vuyiswa
Top achievements
Rank 2
Answers by
Collin
Top achievements
Rank 1
Lance | Manager Technical Support
Telerik team
Vuyiswa
Top achievements
Rank 2
Share this question
or