Content Template

[Vuyiswa]

Good Day 

i am able to show images , video and normal text formatted based on my content templates. but it works well when loading the data in the chat control. When a User type a simple "hi" there is already a content template for outgoing messages which format this correctly when its load. my problem is that when they user type it does not use any of my content template 

 

Author senderitem = new Author();
           senderitem.Avatar = model.AUTHOR_PROFILE_PIC;
           senderitem.Name = model.AUTHOR;

           TextMessage textMessage = new TextMessage();
           textMessage.Data = model.CHAT_MESSAGE;
           textMessage.Author = senderitem;
           textMessage.Text = model.CHAT_MESSAGE;

           Device.BeginInvokeOnMainThread(() =>
           {
               chat.Items.Add(textMessage);
               chat.Message = string.Empty;
           });

 

 

[Petar Marchev]

Hi Vuyiswa,

I am a bit unsure what the problem at hand is. The way the chat chooses a template for a message is by checking with the ItemTemplateSelector. You can read about it in this help article. If you only need to style the messages, i.e. change colors or margins, then you can probably use implicit styles.

However, if you need to add content, like images, or else, you need to use custom templates and need to write up your own template selector in which the proper template is selected. Have you already done this? Have you debugged to ensure that the correct template is selected?

You can keep in mind that the default template selector has a total of 8 templates it works with - 4 outgoing, and 4 incoming message templates. The number is 4, because by default we differentiate between these: single, first, middle, last.

Perhaps I did not fully understand your question, and if that is the case, please include more details so that I can get a better understanding of the issue at hand.

Regards,
Petar Marchev
Progress Telerik

[Vuyiswa]

Good Day Petar 

Thank you for your reply , i have already implemented the "ItemTemplateSelector" that is where i assign the outgoing and incoming or images or video to a Template. that is ok. My issue is that when loading the message items from the database , the ItemTemplateSelector is formatting messages nicely with no problem. i have attached a video for that.

My issue is that when i type a simple message 

hi

This typed message , does not use the outgoing template even though i see OnSelectTemplate is fired and conditions i met and it does go to the Outgoing Template. Another thing i have noted is that when when typing the message and click the send button 

OnSelectTemplate is fired many times it happens very fast but in debug mode you can see repeated calls trigger by a simple send message. 

my chat is defined like this 

 

  <telerikConversationalUI:RadChat x:Name="chat"  Grid.Row="1"
                                     local:ChatroomUtils.AuthorsMap="{StaticResource AuthorsMap}"
                                     ItemConverter="{StaticResource ChatroomMessageConverter}" AutoScrollMode="Automatic"
                                     ControlTemplate="{StaticResource CustomChatControlTemplate}"
                                     ItemTemplateSelector="{StaticResource CustomChatItemTemplateSelector}"

                                     >
            </telerikConversationalUI:RadChat>

 

and these are my Templates 

<DataTemplate x:Key="AttachmentIncomingMessageTemplate">

      <Frame CornerRadius="10"  BackgroundColor="Transparent"   MinimumHeightRequest="25" HorizontalOptions="End"
  Padding="10" VerticalOptions="FillAndExpand">
              <AbsoluteLayout>
              <StackLayout>
                  <ffimageloading:CachedImage Source="{Binding Text}"    DownsampleUseDipUnits="True"  RetryCount="5"  RetryDelay="5"   LoadingPlaceholder="hour_glass.gif" ErrorPlaceholder="error.png" DownsampleToViewSize="true"
  Aspect="AspectFit"    WidthRequest="250" HeightRequest="250">

                  </ffimageloading:CachedImage>
                  <Label  FontSize="Micro"  HorizontalTextAlignment="End"  Text="{Binding Data.DATE_ADDED_FRIENDLY}" TextColor="LightGray"></Label>
                  </StackLayout>
          </AbsoluteLayout>
          </Frame>


  </DataTemplate>

  <DataTemplate x:Key="AttachmentOutgoingMessageTemplate">

      <Frame CornerRadius="10"   BackgroundColor="Transparent"
  Padding="10"
    HasShadow="false"
    HorizontalOptions="StartAndExpand"  VerticalOptions="FillAndExpand">

              <AbsoluteLayout>
              <StackLayout>
                  <ffimageloading:CachedImage Source="{Binding Text}"   DownsampleUseDipUnits="True"  RetryCount="5"  RetryDelay="5"   LoadingPlaceholder="hour_glass.gif" ErrorPlaceholder="error.png" DownsampleToViewSize="true"
  Aspect="AspectFit"    WidthRequest="250"  HeightRequest="250">

                  </ffimageloading:CachedImage>
                  <Label  FontSize="Micro"  HorizontalTextAlignment="End"  Text="{Binding Data.DATE_ADDED_FRIENDLY}" TextColor="DarkGray"></Label>
          </StackLayout>
          </AbsoluteLayout>
          </Frame>
  </DataTemplate>



  <DataTemplate x:Key="AttachmentIncommingMessageTemplate">

      <Frame    BackgroundColor="Transparent"   HorizontalOptions="End"
  Padding="10" >
          <StackLayout  BackgroundColor="#ECE5DD">
              <Label TextColor="Black"  Text="{Binding Text}" />
              <Label   FontSize="Micro"   HorizontalTextAlignment="End"  Text="{Binding Data.DATE_ADDED_FRIENDLY}" TextColor="DarkGray"></Label>
          </StackLayout>
      </Frame>
  </DataTemplate>

  <DataTemplate x:Key="OutgoingMessageTemplate">
      <Frame  BackgroundColor="Transparent" HorizontalOptions="End">
          <StackLayout  BackgroundColor="#dcf8c6">
              <Label TextColor="Black"  Text="{Binding Text}" />
              <Label  FontSize="Micro"  HorizontalTextAlignment="End"  Text="{Binding Data.DATE_ADDED_FRIENDLY}" TextColor="DarkGray"></Label>
          </StackLayout>
      </Frame>
  </DataTemplate>


  <DataTemplate x:Key="IncommingMessageTemplate">
      <Frame  HorizontalOptions="Start" BackgroundColor="Transparent"
  Padding="10"
    HasShadow="false"  >
          <StackLayout BackgroundColor="#FFFFFF" HorizontalOptions="End">
              <Label TextColor="Black"  Text="{Binding Text}" />
              <Label  FontSize="Micro"  HorizontalTextAlignment="End"  Text="{Binding Data.DATE_ADDED_FRIENDLY}" TextColor="DarkGray"></Label>
          </StackLayout>
      </Frame>
  </DataTemplate>

which are used nicely below 

 

<local:CustomChatItemTemplateSelector x:Key="CustomChatItemTemplateSelector"  OutgoingMessageTemplate="{StaticResource OutgoingMessageTemplate}"  IncommingMessageTemplate="{StaticResource IncommingMessageTemplate}"   AttachmentIncommingMessageTemplate="{StaticResource AttachmentIncommingMessageTemplate}"  AttachmentOutgoingMessageTemplate="{StaticResource AttachmentOutgoingMessageTemplate}"/>

 

All these works fine. but the issue is that the sent message does not use the template. The difference between the messages that are formatted correctly are those one loaded from the db and the one added on run-time disregard the template. 

 

Author senderitem = new Author();
          senderitem.Avatar = model.AUTHOR_PROFILE_PIC;
          senderitem.Name = model.AUTHOR;

          TextMessage textMessage = new TextMessage();
          textMessage.Data = model.CHAT_MESSAGE;
          textMessage.Author = senderitem;
          textMessage.Text = model.CHAT_MESSAGE;

          Device.BeginInvokeOnMainThread(() =>
          {
              chat.Items.Add(textMessage);
              chat.Message = string.Empty;

          });

 

Below is the Video

 Video Example

[Petar Marchev]

Hello Vuyiswa,

Thank you for the additional information. I tried creating a small project with the code you provided but I couldn't because too many small things were missing.

For example I can see that you are using an AuthorsMap. I suspect that this is similar to the one we use in our ChatRoomExample in one of our demos. It relies on a class named ChatroomParticipant in the "models". Since you did not provide these, I found myself making too many guesses and I don't think that I will be able to properly create a test project.

If you are using the AuthorsMap - then I must say that I don't see it set in the selector you are using. Using the same instance of AuthorsMap in the demo is important because it reuses instances of the participants and instances of the chat Authors. I also see that you are creating a brand new Author when adding the message, which may cause some inconsistency in the selector.

Would it be possible to send a small project demonstrating your set up? Something that we can run and that can reproduce the issue at hand so that we can debug and see what is going on. Note that we don't need the actual service you are using and the actual templates with images and videos. We can do better with just some simple mock-up that clearly demonstrates the result you get.

Thank you for understanding.

Regards,
Petar Marchev
Progress Telerik

[Vuyiswa]

i finally resolved the issue. i was passing a text message instead of an object in the Data Property. i just reused the code that was using when binding the form data from the DB