Click here to Skip to main content
15,867,453 members
Articles / Programming Languages / C# 3.5
Tip/Trick

Chat / Conversation Balloon Control with datasource

Rate me:
Please Sign up or sign in to vote.
4.91/5 (10 votes)
15 Aug 2015MIT2 min read 23.8K   1.6K   11   11
Simple and customizable Chat Conversation control, with DataTable datasource, inspired by SMS application balloons in OnePlus One Android smartphone.

Image 1

Introduction

Many times, when creating chatting application for different clients, I faced the problem that I could not find a decent Chat/Conversation custom control.

Common advices I found were to implement it using owner draw tricks and basing on list data controls like DataGridView, ListView, etc.

This article is about my implementation of Chat/Conversation control.

Using the Code

The article source code is subdivided to 2 modules: ConversationCtrl demo executable and Warecast.ControlsSuite.dll.

Both modules are compiled with VS2012 using framework 3.5. Actually, you can use the newest framework; I just wanted to allow it usage in earlier versions. I am sure you will be able to downgrade it to earlier Visual Studio environments.

Warecast.ControlsSuite project contains the full source of the custom control I have created. ConversationCtrl project contains a Form where I bind the Chat/Conversation control to data and PropertyGrid control that is bound to it to allow testing certain properties changes without recompiling the demo.

How to Bind Data to the Control

C#
//create table
DataSet1.ConversationMessagesDataTable table = new DataSet1.ConversationMessagesDataTable();

//create several rows
DataSet1.ConversationMessagesRow newRow = table.NewConversationMessagesRow();
newRow.time = DateTime.Now;
newRow.text = "Hi!";
newRow.incoming = true;
table.AddConversationMessagesRow(newRow);

newRow = table.NewConversationMessagesRow();
newRow.time = DateTime.Now;
newRow.text = "Hi you!";
newRow.incoming = false;
table.AddConversationMessagesRow(newRow);

//set table as datasource
conversationCtrl.DataSource = table;

//configure columns names of datasource inside the control
conversationCtrl.MessageColumnName = table.textColumn.ColumnName;
conversationCtrl.IdColumnName = table.idColumn.ColumnName;
conversationCtrl.DateColumnName = table.timeColumn.ColumnName;
conversationCtrl.IsIncomingColumnName = table.incomingColumn.ColumnName;

//call rebind method that will refresh the data and show datasource data inside the control
conversationCtrl.Rebind();

Points of Interest

Inside the control, I use DataGridView in virtual mode.

I am sure it is possible easily to reformat the virtual mode to data bound mode and use data source in a more efficient way.

In the demo form, I added property grid that gives you easy dynamic ability to see how to customize some colors/sizes inside control without compiling it. E.g. BalloonBackColor or PanelDividerBackColor.

I added the ability to send new messages that will add directly to datasource and after refreshing, it will be shown on the balloons grid. Just insert some text in the textBox and push on Send button?

Note

I used a code of padding calculation snippet from here.

Additionally, I used GraphicsPath code snippet from some place I do not remember.

History

  • 15th August, 2015: Initial version

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Software Developer (Senior)
Israel Israel
Software Development freelancer.

Comments and Discussions

 
QuestionHow could I add an image in the conversation baloon, as well as an icon-image for each of the user-names Pin
AndyHo30-Dec-22 2:09
professionalAndyHo30-Dec-22 2:09 
QuestionIs there a correct sequence to add this control to an existing project? Pin
Alpha Systems13-Jul-20 16:26
Alpha Systems13-Jul-20 16:26 
QuestionIs it possible to use it in an ASP.NET web page? Pin
Member 37988223-May-19 2:03
Member 37988223-May-19 2:03 
QuestionBallon control Pin
Member 1288466127-Apr-17 18:02
Member 1288466127-Apr-17 18:02 
Can i import this control to .net project?
AnswerRe: Ballon control Pin
IssaharNoam23-May-17 10:14
IssaharNoam23-May-17 10:14 
QuestionDesign questions. How do I get out of the current time. Pin
Member 1284006719-Feb-17 17:26
Member 1284006719-Feb-17 17:26 
AnswerRe: Design questions. How do I get out of the current time. Pin
IssaharNoam23-May-17 10:18
IssaharNoam23-May-17 10:18 
Praisethanks for your good job and save my time Pin
Member 1222202227-Jun-16 20:43
Member 1222202227-Jun-16 20:43 
AnswerRe: thanks for your good job and save my time Pin
IssaharNoam30-Oct-16 18:51
IssaharNoam30-Oct-16 18:51 
Questionsource code file link broken Pin
Tridip Bhattacharjee16-Aug-15 22:37
professionalTridip Bhattacharjee16-Aug-15 22:37 
AnswerRe: source code file link broken Pin
IssaharNoam16-Aug-15 23:11
IssaharNoam16-Aug-15 23:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.