Coding4Fun Chat Bubble Control Using UWP With XAML And C#

Before reading this article, please go through the following article.

Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

Chat Bubble is a container that can be used to show any kind of visual content in the form of a chat bubble. Reading this article, you will learn how to use Coding4Fun Chat Bubble in Universal Windows Apps development, with XAML and Visual C#.

The following important tools are required for developing UWP,

Windows 10 (Recommended)
Visual Studio 2015 Community Edition (It is a free software available online).

Now, let's discuss the step by step process of app development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C# -> Windows) -> Blank App -> Give it a suitable name (UWPC4FChatBubble) -> OK.

UWP

After choosing the target and minimum platform versions for your app, the project gets created. It creates App.xaml and MainPage.xaml files.

UWP

Step 2

Add TextBlock control and change the name and text property for title.

UWP

Step 3

Open (double click) the file MainPage.xaml in the Solution Explorer and add the Coding4Fun.Toolkit.Controls reference in the project.

For adding Reference, right click your project (UWPC4FChatBubble) and select "Manage NuGet Packages".

UWP

Choose "Browse" and search Coding4Fun.Toolkit.Controls. Select the package and install it.

UWP

Reference is added to your project.

UWP

Step 4

Add tab in the Toolbox, for adding Coding4Fun Toolkit controls.

UWP

Right click the Coding4Fun Toolkit (Newly added tab) and select "Choose items".

UWP

Select the path "C:\Users\<username>\.nuget\packages\Coding4Fun.Toolkit.Controls\2.1.8\lib\netcore451" and select the file Coding4Fun.Toolkit.controls.dll.

Now, filter the Coding4Fun.Toolkit controls.

Step 5

Add the Chat Bubble Control for displaying a content and set the property name and content.

UWP

Step 6

Now, add the another Chat Bubble control for displaying an image. Add the Image Control inside the Chat Bubble control and set the image name and source property.

UWP

Note Automatically the following code will be generated in XAML code view when we are done in the design view.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPC4FChatBubble" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Coding4Fun.Toolkit.Controls" x:Class="UWPC4FChatBubble.MainPage" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="36,32,0,0" TextWrapping="Wrap" Text="UWP Code4Fun Chat Bubble Test" VerticalAlignment="Top" Height="35" Width="314" FontSize="18" FontWeight="Bold" />
<Controls:ChatBubble x:Name="CBTest" HorizontalAlignment="Left" Margin="10,145,0,0" VerticalAlignment="Top" Width="340" Height="42" FontSize="12" Content="Welcome to Code4Fun ChatBubble in C Sharp Corner......" />
<Controls:ChatBubble x:Name="CBimg" HorizontalAlignment="Left" Margin="136,213,0,0" VerticalAlignment="Top" Width="140" Height="129">
<Image x:Name="image" Height="100" Width="100" Source="Assets/smiley.jpg" Margin="4,2,3,2" />
</Controls:ChatBubble>
</Grid>
</Page>

Step 7

Deploy your app in Local Machine. The output of the UWPC4FChatBubble App is shown below.

UWP

Summary

Now, you have successfully tested Code4Fun ToolKit – Chat Bubble in Visual C# - UWP environment.