blocks|key|215027|text|您可以使用一个FlowlayoutPanel和一个新的Chat冒泡用户控件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215028|首先，您需要向项目中添加一个新的用户控件。叫它ChatBubble。使用Control类或UserControl类基本上取决于您。我在我的例子中偶然地使用了Control，但这并没有多大的区别。该类型在自动创建的.Desiger中定义。由提交。|offset|length|style|CODE|215029|否定义控件的某些属性|215030|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|code-block|syntax|javascript|215031|方向定义聊天气泡是左对齐还是右对齐，背刷是气泡的背景色。|215032|构造函数用于设置控件的更多参数。|215033|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|215034|默认文本属性用于聊天文本。|215035|现在，您实际上需要绘制控件|215036|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+%2B+Me.Padding.Left,+Me.ClientRectangle.Top+%2B+Me.Padding.Top,+_
+++++++++++++++++++++++++++++textSize.Width+%2B+10,+Me.ClientRectangle.Height+-+Me.Padding.Bottom+-+Me.Padding.Top)
++++Else
++++++++Ellipse+=+New+Rectangle(Me.ClientRectangle.Right+-+(textSize.Width+%2B+10)+-+Me.Padding.Right,+Me.ClientRectangle.Top+%2B+Me.Padding.Top,+_
+++++++++++++++++++++++++++++textSize.Width+%2B+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+%2B+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|215037|这是一个非常粗略的例子。您可以根据文本自动调整控件的大小，包括文本包装，但这基本上可以满足您的需要。将气泡添加到顶部/底部流布局面板中，如下所示：|215038|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+%2B=+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|215039|样本输出：|215040|​|215041|📷|atomic|215042|215043|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/f666fa7a45d3a12d860c8c6807f4f60e.png|imageAlt^0|0|N|A|10|7|19|B|26|7|0|0|0|0|0|0|0|0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1M|8|@$D|1N|E|1O|F|G]|$D|1P|E|1Q|F|G]|$D|1R|E|1S|F|G]|$D|1T|E|1U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1V|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1W|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1X|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|S|3|T|5|L|7|1Z|8|@]|9|@]|A|$M|N]]|$1|U|3|V|5|6|7|20|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|21|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|22|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|6|7|23|8|@]|9|@]|A|$]]|$1|12|3|13|5|L|7|24|8|@]|9|@]|A|$M|N]]|$1|14|3|15|5|6|7|25|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|26|8|@]|9|@]|A|$]]|$1|18|3|19|5|1A|7|27|8|@]|9|@$D|28|E|29|1|2A]]|A|$]]|$1|1B|3|17|5|6|7|2B|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]]|1D|$1E|$5|1F|1G|1H|A|$1I|1J|1K|-4]]]]

You can use a FlowlayoutPanel and a new Chatbubble usercontrol.

First you need to add a new usercontrol to your project. Call it <code>ChatBubble</code>.
It's basically up to you if you use the <code>Control</code> class or the <code>UserControl</code> class. I used <code>Control</code> 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

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

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

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

The default text property is used for the chat text.

Now you actually need to draw the control

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

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:

<pre><code>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 " &amp; 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
</code></pre>

Sample output:

<img src="https://i.stack.imgur.com/IX82o.png" alt="enter image description here">

blocks|key|2367860|text|尝试为消息弹出创建自定义表单，并将自定义区域添加到该窗体中。因此，当消息出现时，应该像这样调用气球消息。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2367861|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|code-block|syntax|javascript|2367862|从Region阅读更多关于MSDN和自定义形状窗体和控件的信息|offset|length|style|CODE|2367863|或者，您可以将PNG透明图像设置为BalloonMessage窗体，并将背景色设置为绿色或蓝色，然后为该窗体设置与背景色相同的BackgroundTransperancy。这是使您的窗口形成自定义形状的最简单方法。|2367864|将DoubleBuffer属性设置为true，以使BalloonMessage窗体光滑。|2367865|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/aa289517%2528v=vs.71%2529.aspx^0|0|0|1|6|D|4|0|0|0|1|C|P|E|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|17|8|@$I|18|J|19|K|L]|$I|1A|J|1B|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

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.

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

Read more about <code>Region</code> and Custom Shaped Forms and Controls from <a href="http://msdn.microsoft.com/en-us/library/aa289517%28v=vs.71%29.aspx" rel="nofollow">MSDN</a>

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 <code>DoubleBuffer</code> property to true to make your <code>BalloonMessage</code> form smooth.

blocks|key|215116|text|您可以使用图像和文本框来实现这一点，只需将其与泡沫相结合即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215117|​|215118|📷|atomic|offset|length|215119|215120|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://pbs.twimg.com/media/CSjxdDHVAAAJ7uV.png|imageAlt^0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@$G|V|H|W|1|X]]|A|$]]|$1|I|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q|R|-4]]]]

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

<img src="https://pbs.twimg.com/media/CSjxdDHVAAAJ7uV.png" alt="Screenshot 1">

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)

<img src="https://i.stack.imgur.com/FhToP.jpg" alt="enter image description here">

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.

How to do Chat Bubbles in VB.NET WinForms application

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

首先，我想说，我对整个聊天泡沫概念相当陌生.我已经做了相当多的研究，并且在WinForms桌面应用程序中如何做到这一点的结果是空白的。这个概念相当简单(而且很普遍，尤其是在移动设备中)。​​我想这样做(最好是在RichTextBox中)。请记住，这是一个WinForms应用程序，所以XAML组件将无法工作。这只是一个聊...

问如何在VB.NET WinForms应用程序中实现聊天气泡
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在VB.NET WinForms应用程序中实现聊天气泡EN