Chat Bubble Control For Windows 10 UWP App Using Coding4Fun Toolkit

Chat Bubble is a control to show any kind of content in the form of a chat bubble. A ChatBubbleTextBox is a control used to receive user input.

Let’s see the steps.

Create new Windows 10 UWP project and install Coding4Fun Toolkit. It looks like the following screen.



To add the components of the Coding4Fun Toolkit in the XAML page, add the below namespace definition to the XAML file.

xmlns:C4FTK="using:Coding4Fun.Toolkit.Controls"

Next, design the chat bubble using the following XAML code.

<StackPanel>
    <C4FTK:ChatBubble HorizontalAlignment="Right" Foreground="White" Content="Hi welcome to C# Corner"> </C4FTK:ChatBubble>
    <C4FTK:ChatBubble HorizontalAlignment="Left" Foreground="White" Content="LowerLeft Direction" ChatBubbleDirection="LowerLeft" />
    <C4FTK:ChatBubble HorizontalAlignment="Right" Foreground="White" Content="Windows 10 UWP Chat Bubble" />
    <C4FTK:ChatBubble HorizontalAlignment="Left" Foreground="White" Content="Suresh MVP" ChatBubbleDirection="LowerLeft" /> </StackPanel>
<StackPanel Grid.Row="1" VerticalAlignment="Bottom" Orientation="Horizontal">
    <C4FTK:ChatBubbleTextBox BorderBrush="Blue" Width="300" HorizontalAlignment="Left"></C4FTK:ChatBubbleTextBox>
    <Button Content="Send" HorizontalAlignment="Right"></Button>
</StackPanel>

We can set the direction of ChatBubble control using ChatBubbleDirection property that determines in which direction the bubble will be shown - UpperRight, UpperLeft, LowerRight, or LowerLeft.

ChatBubbleTextBox control is used to get the input from user. We can set the ChatBubbleTextBox direction using direction property. It determines the position of chat bubbling direction where the ChatBubbleTextBox control will appears.

Now, run the app and see the output. It looks like the following screen.