ChatBubble

ChatBubble

The ChatBubble control provides an easy way to create conversational chat experience.

Features

• Support for any message content.
• Different bubble types.
• Allow to customize the bubble text font.
• ControlTemplate support.

Using the control

Create a new ChatBubble and set the Text and BackgroundColor:

<controls:ChatBubble
    BubbleType="Receiver"
    BackgroundColor="LightSeaGreen"
    TextColor="White"
    Text="Lorem ipsum dolor sit amet"/>

Different Bubble Types

The BubbleType property helps differentiate between the sender and receiver of the messages.

<controls:ChatBubble
    BubbleType="Receiver"
    BackgroundColor="LightSeaGreen"
    TextColor="White"
    Text="Lorem ipsum dolor sit amet"/>

<controls:ChatBubble
    BubbleType="Sender"
    BackgroundColor="DarkKhaki"
    TextColor="White"
    Text="Lorem ipsum dolor"/>

Customize the message

The font can be customized using the FontSize, FontAttributes, and FontFamily properties.

<controls:ChatBubble
    BubbleType="Receiver"
    BackgroundColor="OliveDrab"
    TextColor="White"
    FontSize="18"
    FontAttributes="Bold"
    Text="Custom font properties"/>

Use custom content

Do you need different texts, or other types of content such as images or videos?. You can add any content using the Content property.

<controls:ChatBubble
    BubbleType="Receiver"
    BackgroundColor="PaleVioletRed">
    <controls:ChatBubble.Content>
        <Image
            HeightRequest="100"
            WidthRequest="250"
            Aspect="AspectFill"
            Source="javier.jpg"/>
    </controls:ChatBubble.Content>
</controls:ChatBubble>