Before reading this article, please go through the article, given below.
- Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
ChatBubbleTextBox is a simple and easy-to-use control, which is derived from TextBox.
After reading this article, you will learn how to use Coding4Fun ChatBubbleTextbox in Universal Windows apps development with XAML and Visual C#.
The important tools given below are required to develop UWP
- Windows 10 (Recommended).
- Visual Studio 2015 Community Edition (It is a free software available online).
Now, we can discuss step by step app development.
Step1
Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank app -> Give the suitable name for your app (UWPC4FChatBubTBox)->OK.
![platform version]()
After choosing the Target and minimum platform version for your Windows, Universal Application will support and the project creates App.xaml and MainPage.xaml.
![platform version]()
Step 2
Open (double click) the file MainPage.xaml in Solution Explorer and add the Coding4Fun.Toolkit.Controls reference in the project.
To add the reference, right click on your project (UWPC4FChatBubTBox) and select Manage NuGet Packages.
![platform version]()
Choose Browse and search Coding4Fun.Toolkit.Controls. Select the package and install it.
![platform version]()
The reference is added in your project.
![platform version]()
Step 3
Add tab in the Toolbox to add Coding4Fun Tool Kit controls. Right click on the Coding4Fun Toolkit (Newly added tab) and select choose items.
![platform version]()
Select the path, given below.
C:\Users\<username>\.nuget\packages\Coding4Fun.Toolkit.Controls\2.1.8\lib\netcore451
Select the file Coding4Fun.Toolkit.dll and filter the Coding4Fun.Toolkit controls.
![platform version]()
Step 4
Add TextBlock control, change the name and text property for the title.
![platform version]()
Add the Border Control and set the name property.
![]()
Add the StackPanel control.
![platform version]()
Step 5
Add the ChatBubble control, set the name, ChatBubbleDirection and Content (empty) Properties.
![platform version]()
Add the ChatBubbleTextBox control, set the name, Text (empty) Properties.
![platform version]()
Add the Button control to retrieve the message from ChatBubbleTextBox to ChatBubble.
![platform version]()
Add the Click Event method for the Button control.
![platform version]()
Step 6
Resize the design.
![platform version]()
Note
Automatically, the code, given below will be generated in XAML code view, while 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:UWPC4FChatBubTBox" 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="UWPC4FChatBubTBox.MainPage" mc:Ignorable="d">
- <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
- <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="105,50,0,0" TextWrapping="Wrap" Text="Coding4Fun ChatBubbleTextBox Control Demo" VerticalAlignment="Top" FontWeight="Bold" FontSize="20" Width="495" />
- <Border x:Name="Borcbt" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="227" Margin="47,97,0,0" VerticalAlignment="Top" Width="553">
- <StackPanel Margin="9,0,0,-1">
- <Controls:ChatBubble x:Name="CBChattbx" Content="" Height="77" FontStyle="Italic" ChatBubbleDirection="LowerRight" FontSize="12" ScrollViewer.HorizontalScrollBarVisibility="Visible" HorizontalContentAlignment="Stretch" />
- <Controls:ChatBubbleTextBox x:Name="CBTtest" Height="67" TextWrapping="Wrap" Text="" ChatBubbleDirection="LowerRight" TabIndex="0" FontSize="12" />
- <Button x:Name="btnSend" Content="Send" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="25" Margin="422,10,10,10" FontSize="8" Click="btnSend_Click" />
- </StackPanel>
- </Border>
- </Grid>
- </Page>
Step 7
Add the code, given below to MainPage.xaml.cs to display the content from ChatBubbleTextBox to ChatBubble.
- string s;
- private void btnSend_Click(object sender, RoutedEventArgs e) {
- CBChattbx.Content = s + CBTtest.Text;
- s = CBChattbx.Content + "\n";
- CBTtest.Text = "";
- CBTtest.Focus(FocusState.Pointer);
- }
Step 8
Deploy your app in local machine and the output of UWPC4FChatBubTBox app is given below.
After clicking or tapping Send button, screenshot given below appears.
Enter the next message.
After clicking or tapping the Send button, the screenshot, given below appears.
Summary
Now, you have successfully tested Code4Fun ToolKit – ChatBubbleTextbox in Visual C# - UWP environment.