How to do Chat Bubbles in VB.NET WinForms application

Question

First, I would like to state that I am fairly new to the whole chat-bubble concept.

I have done quite a bit of research and have come up void in results pertaining to how this can be done in a WinForms desktop application.

The concept is rather simple (and common, especially in mobile devices)

I would like to do this (ideally in a RichTextBox). Please remember, this is a WinForms application, so XAML components will not work. This is a chat layout issue only. Sending/receiving/displaying the messages is already done, I just need to know how to wrap those messages inside a bubble (left or right depending on communication direction), and display that in the form -- in a normal chat flow (currently using RichTextBox, and colorizing the name).

Thanks in advance.

Answer 1

You can use image and textbox for this just combine it to looks like bubble.

Answer 2

Try to create custom form for message popup and add the custom region to that form. So, when the message comes the balloon message should be call like this.

BalloonMessage balloon As New BalloonMessage(Message = "My Message goes here.", IsRecipient = true, Locantion= new Point(x,y))
ballon.Show()

//Balloon Message Form
Public Class BalloonMessage 
Inherits Form
    Public Sub New(Message As String, IsRecipient As Boolean, Location As Point)
         Initialization()
         Me.Location = Location
         Me.rtf.Text = Message
         Me.Region = new Region(getRegion(IsRecipient))
    End Sub

    Private Function getRegion(IsRecipient As Boolean) As GraphicsPath
        Dim gp As New GraphicsPath
        //Place condition to create balloon point position either left or right
        return gp
    End Function

End Class

Read more about Region and Custom Shaped Forms and Controls from MSDN

Or you can set PNG transparent image to your BalloonMessage Form and set the background color to Green or Blue then set BackgroundTransperancy for that form same as Background color. This is the easiest way to make your window form custom shaped.

Set DoubleBuffer property to true to make your BalloonMessage form smooth.

Answer 3

You can use a FlowlayoutPanel and a new Chatbubble usercontrol.

First you need to add a new usercontrol to your project. Call it ChatBubble. It's basically up to you if you use the Control class or the UserControl class. I used Control in my example by accident but it doesn't make much of a difference. The type is defined in the automatically created .Desiger. file by Visual Studio.

No define some properties of the control

Public Class ChatBubble
    'The "Inherits Control/Usercontrol statement is found in the designer

    Public Enum LeftRight
        Left = 0
        Right = 1
    End Enum
    Public Property Orientation As LeftRight
    Public Property BackBrush As Brush

Orientation defines if the chat bubble is left or right aligned, Backbrush is the background color of the bubble.

A constructor is used to set some more parameters of the control

Public Sub New()
   InitializeComponent()
   SetStyle(ControlStyles.ResizeRedraw, True) 'Redraw the control on resize
   SetStyle(ControlStyles.OptimizedDoubleBuffer, True) 'Double buffer the drawing
   SetStyle(ControlStyles.AllPaintingInWmPaint, True) 'Used to draw the control yourself
   SetStyle(ControlStyles.UserPaint, True) 'Used to draw the control yourself
   BackBrush = Brushes.Blue 'Default values
   Orientation = LeftRight.Left 'Default values
   Me.Padding = New Padding(5) 'Default values
End Sub

The default text property is used for the chat text.

Now you actually need to draw the control

Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
    MyBase.OnPaint(e)
    'Smooth the output
    e.Graphics.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias
    'Measure the size of your content
    Dim textSize As SizeF = e.Graphics.MeasureString(Me.Text, Me.Font)

    'Ellipse defines the extents of the bubble
    Dim Ellipse As Rectangle
    'Setup the ellipse depending on the orientation
    'Include margins (5 inside, padding of the control outside)
    If Orientation = LeftRight.Left Then
        Ellipse = New Rectangle(Me.ClientRectangle.Left + Me.Padding.Left, Me.ClientRectangle.Top + Me.Padding.Top, _
                             textSize.Width + 10, Me.ClientRectangle.Height - Me.Padding.Bottom - Me.Padding.Top)
    Else
        Ellipse = New Rectangle(Me.ClientRectangle.Right - (textSize.Width + 10) - Me.Padding.Right, Me.ClientRectangle.Top + Me.Padding.Top, _
                             textSize.Width + 10, Me.ClientRectangle.Height - Me.Padding.Bottom - Me.Padding.Top)
    End If
    'Define the text's location, center top/bottom
    Dim TextLocation As Point = New Point(Ellipse.Left + 5, CInt(Me.ClientSize.Height / 2 - textSize.Height / 2))
    'Draw the bubble
    e.Graphics.FillEllipse(BackBrush, Ellipse)
    'Draw the string
    e.Graphics.DrawString(Me.Text, Me.Font, Brushes.White, TextLocation)
End Sub

This is a very rough example. You can autosize your control depending on your text, include text wrapping, but this basically does what you want. Add the bubbles to a Top/Bottom Flowlayoutpanel like this:

Public Class Form1

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
       'flp is the flowlayoutpanel

        Static count As Integer = 1

        Dim b As New ChatBubble
        With b
             .Text = "Hello World " & count.ToString
             .Orientation = If(count Mod 2 = 0, ChatBubble.LeftRight.Left, ChatBubble.LeftRight.Right)
             .Size = New Size(flp.Width, 30)
         End With

         flp.Controls.Add(b)
         count += 1
    End Sub

    Private Sub flp_Resize(sender As Object, e As EventArgs) Handles flp.Resize
        For Each c As Control In flp.Controls
             c.Width = flp.Width
         Next
    End Sub
End Class

Sample output: