Chat / Conversation Balloon Control with datasource

• Download source - 32.8 KB

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

//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

• 15^th August, 2015: Initial version