Click here to Skip to main content
13,598,013 members
Click here to Skip to main content
Add your own
alternative version

Stats

10.1K views
631 downloads
6 bookmarked
Posted 15 Aug 2015
Licenced MIT

Chat / Conversation Balloon Control with datasource

, 15 Aug 2015
Rate this:
Please Sign up or sign in to vote.
Simple and customizable Chat Conversation control, with DataTable datasource, inspired by SMS application balloons in OnePlus One Android smartphone.

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

  • 15th August, 2015: Initial version

License

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

Share

About the Author

IssaharNoam
Software Developer (Senior)
Israel Israel
Software Development freelancer.

You may also be interested in...

Pro

Comments and Discussions

 
QuestionBallon control Pin
Member 1288466127-Apr-17 18:02
memberMember 1288466127-Apr-17 18:02 
AnswerRe: Ballon control Pin
IssaharNoam23-May-17 10:14
memberIssaharNoam23-May-17 10:14 
QuestionDesign questions. How do I get out of the current time. Pin
Member 1284006719-Feb-17 17:26
memberMember 1284006719-Feb-17 17:26 
AnswerRe: Design questions. How do I get out of the current time. Pin
IssaharNoam23-May-17 10:18
memberIssaharNoam23-May-17 10:18 
Praisethanks for your good job and save my time Pin
Member 1222202227-Jun-16 20:43
memberMember 1222202227-Jun-16 20:43 
AnswerRe: thanks for your good job and save my time Pin
IssaharNoam30-Oct-16 18:51
memberIssaharNoam30-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
memberIssaharNoam16-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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.180621.3 | Last Updated 15 Aug 2015
Article Copyright 2015 by IssaharNoam
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid