vb.net - 如何在 VB.NET WinForms 应用程序中创建聊天气泡

Question

首先，我想声明我对整个聊天气泡概念相当陌生。

我已经进行了大量研究，但关于如何在 WinForms 桌面应用程序中完成此操作的结果无效。

这个概念相当简单(而且很常见，尤其是在移动设备中)

我想这样做(最好是在 RichTextBox 中)。请记住，这是一个 WinForms 应用程序，因此 XAML 组件将不起作用。这只是一个聊天布局问题。发送/接收/显示消息已经完成，我只需要知道如何将这些消息包装在气泡中(根据通信方向向左或向右)，并以正常的聊天流程(当前使用RichTextBox，并为名称着色)。

提前致谢。

Answer 1

您可以使用 FlowlayoutPanel 和新的 Chatbubble 用户控件。

首先，您需要向您的项目添加一个新的用户控件。将其命名为 ChatBubble。使用 Control 类还是 UserControl 类基本上取决于您。我在示例中无意中使用了 Control，但这并没有太大的区别。该类型在自动创建的 .Desiger 中定义。 Visual Studio 文件。

没有定义控件的一些属性

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 定义聊天气泡是左对齐还是右对齐，Backbrush 是气泡的背景颜色。

构造函数用于设置控件的更多参数

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

默认文本属性用于聊天文本。

现在您实际上需要绘制控件

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

这是一个非常粗略的例子。您可以根据文本自动调整控件大小，包括文本换行，但这基本上可以满足您的需求。像这样将气泡添加到顶部/底部流布局面板:

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

示例输出: