Custom Look on the Chat Control

4 posts, 0 answers
  1. Vuyiswa
    Vuyiswa avatar
    217 posts
    Member since:
    Jan 2010

    Posted 26 Nov 2018 Link to this post

     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 

  2. Collin
    Collin avatar
    3 posts
    Member since:
    Feb 2019

    Posted 11 Feb in reply to Vuyiswa Link to this post

    @Vuyiswa 

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

  3. Lance | Team Lead - US DevTools Support
    Admin
    Lance | Team Lead - US DevTools Support avatar
    1047 posts

    Posted 11 Feb Link to this post

    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
  4. Vuyiswa
    Vuyiswa avatar
    217 posts
    Member since:
    Jan 2010

    Posted 26 Aug in reply to Collin Link to this post

    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

     

Back to Top