Question

首先，我想说明我对整个聊天泡泡概念还不熟悉。

我做了很多研究，并且在有关如何在WinForms桌面应用程序中完成此操作的结果中出现了无效。

这个概念相当简单（并且很常见，特别是在移动设备中）

enter image description here

我想这样做（理想情况下是在RichTextBox中）。请记住，这是一个WinForms应用程序，因此XAML组件将无法正常工作。这只是聊天布局问题。发送/接收/显示消息已经完成，我只需要知道如何将这些消息包装在气泡内（左或右取决于通信方向），并在表单中显示 - 在正常聊天流程中（目前正在使用） RichTextBox，并将名称着色）。

提前致谢。

Answer 1

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

首先，您需要向项目添加新的usercontrol。称之为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

方向定义聊天气泡是左对齐还是右对齐，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

这是一个非常粗略的例子。您可以根据文本自动调整控件，包括文本换行，但这基本上可以满足您的需求。将气泡添加到顶部/底部Flowlayoutpanel，如下所示：

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

示例输出：

enter image description here

Answer 2

尝试为邮件弹出创建自定义表单，并将自定义区域添加到该表单。因此，当消息到来时，应该像这样调用气球消息。

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

从MSDN

了解有关Region和自定义形状表单和控件的详情

或者您可以将PNG透明图像设置为BalloonMessage表单并将背景颜色设置为绿色或蓝色，然后将该表单的BackgroundTransperancy设置为背景颜色。这是使窗口形状自定义形状的最简单方法。

将DoubleBuffer属性设置为true可使您的BalloonMessage表单平滑。

Answer 3

你可以使用图像和文本框，只需将它组合起来就像泡泡一样。

Screenshot 1

如何在VB.NET WinForms应用程序中进行聊天气泡

3 个答案: