winform仿QQ聊天氣泡（純c#代碼）

• 寫個聊天氣泡
• • 最后效果
  • 用到的組件
  • 步驟
  • 部分代碼（后臺）

寫個聊天氣泡

最近學習c#編程時突然想自己寫一個仿QQ的聊天程序，構思的時候可能沒想周全，真正動手時卻發現不會的東西太多了，也試過找網上的源碼看，然而我這個初學者來說，超過200行的代碼就形同天書了，所以只能東拼西湊+自己摸索著寫，諸多問題中，如何用winform自帶的控件實現聊天氣泡算是一個不小的難點了，下面是我自己摸索的解決方案，有點撈，但好歹能跑起來，發出來和大家共同進步吧。

最后效果

用到的組件

由于winform上自帶的控件功能有限，所以采用組合控件的方式，自定義了：
兩個TextBox控件（TextBox2用于顯示昵稱，TextBox1用于顯示消息文本）；
一個PictureBox（用于顯示頭像）；
一個Panel容器（用作消息文本的背景框）；
再加上控件自身（下圖中的BubContent）一共5個組件。

步驟

1、右鍵解決方案——添加——新建項——用戶控件（Windows窗體）；

2、從工具箱把需要的控件一個一個拖進來；

3、所有控件的Anchor屬性都設置為None、AutoSize屬性（如果有的話）設置為False；

4、兩個TextBox的BorderStyle設置為None，ReadOnly屬性設置為true，字體可以自己看著設置；

5、編寫布置組件的代碼（最好寫到Bubble的Load事件中）；

6、編寫繪制背景框的代碼，添加到Panel1控件的Paint事件中；

7、保存并生成解決方案，之后你就能在工具箱中找到寫好的Bubble控件辣~

注1：之所以不用Label來顯示文字，是因為Label不能聚焦，所以無法使用鼠標來選中文字進行復制，如果沒有這種需要，建議使用Label來繪制背景框（TextBox沒有Paint事件，必須添加Panel作為背景）。

注2：我試了試用控件自身的Anchor屬性和AutoSize屬性來布局控件，結果并不理想，不知道是不是我自己的原因，感興趣的可以試一試。

注3：如果想自己調整背景框的大小，建議徒手畫一個圖，如下：

部分代碼（后臺）

代碼僅供參考（寫的有點撈，請大佬輕點兒噴）
由于我的項目還沒有寫完，這個代碼只是單獨的控件代碼，并沒有和主界面交互的內容，各位可以根據自己的需要復制下來修改。

ps：如果有比我更萌的萌新不知道怎么添加后臺代碼，就雙擊兩下控件的區域，出來的部分類代碼就是后臺代碼了。

public partial class Bubble : UserControl{int _W, _H; //氣泡的寬度、高度Size CCSize; //CornerCircleSizeControl TextC;Color color; //背景顏色/// <summary>/// 構造函數，對所需參數賦值/// </summary>public Bubble(){InitializeComponent();color = Color.FromArgb(255, 160, 160); //邊框顏色TextC = this.textBox1; //文本欄CCSize = new Size(16, 16); //過渡圓角對應的矩形大小}/// <summary>/// 調整氣泡及其內部組件的大小和布局/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void Bubble_Load(object sender, EventArgs e){ this.textBox1.Text = "這是一個測試用的消息\r\n這是第二行的文字";TextBoxAutosization();#region 設置圖片框為圓形的代碼GraphicsPath gp = new GraphicsPath();gp.AddEllipse(pictureBox1.ClientRectangle);Region region = new Region(gp);pictureBox1.Region = region;gp.Dispose();region.Dispose();#endregion//文本框大小，和文本欄大小相關this.panel1.Size= new Size(this.textBox1.Width + CCSize.Width + 9, this.textBox1.Height + CCSize.Height +1); //文本欄背景顏色，和文本框顏色相同this.textBox1.BackColor = color;#region 設置氣泡的大小的代碼_W = 64 + this.panel1.Width;if (this.panel1.Height + 23 > 64)_H = this.panel1.Height + 23;else_H = 64;this.Size = new Size(_W, _H);#endregion#region 調整內部組件的布局的代碼this.textBox2.Location = new Point(this.Width - 64 - this.textBox2.Width, 4);this.pictureBox1.Location = new Point(this.Width - 32 - this.pictureBox1.Width / 2, 32 - this.pictureBox1.Width / 2);this.textBox1.Location = new Point(this.Width - 64 - CCSize.Width / 2 - TextC.Width, 23 + CCSize.Height / 2); this.panel1.Location = new Point(TextC.Location.X - CCSize.Width / 2, TextC.Location.Y - CCSize.Height / 2);#endregion}/// <summary>/// 根據文字內容調整氣泡文本欄大小/// </summary>public void TextBoxAutosization(){ Graphics g = this.textBox1.CreateGraphics();Size s = g.MeasureString(textBox1.Text, textBox1.Font).ToSize();textBox1.Size = s;g.Dispose();}/// <summary>/// 繪制氣泡的背景框/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void Frame_Paint(object sender, PaintEventArgs e){Control FrameC = sender as Control; //邊框（也就是Panel1控件）Brush brushes = new SolidBrush(color);Pen pen = new Pen(brushes);//定位中間十字區域需要的八個點Point HP1 = new Point(CCSize.Width / 2, 0); //左上角（縱）Point HP4 = new Point(HP1.X + TextC.Width, FrameC.Height); //右下角（縱）Point HP2 = new Point(HP4.X, HP1.Y); Point HP3 = new Point(HP1.X, HP4.Y);Point WP1 = new Point(0, CCSize.Height / 2); //左上角（橫）Point WP4 = new Point(HP4.X + CCSize.Width / 2+1, HP4.Y - CCSize.Height / 2); //右下角（橫）Point WP2;Point WP3 = new Point(WP1.X, WP4.Y); //定位側邊小三角形需要的三個點Point WP5 = new Point(FrameC.Width+1, CCSize.Height / 2 + 3); WP2 = new Point(WP4.X, WP5.Y - 3); Point WP6 = new Point(WP4.X, WP5.Y + 3); //定位過渡圓角需要的四個矩形Point RP1 = new Point(-1, -1);Point RP4 = new Point(TextC.Width+1, TextC.Height+1);Point RP2 = new Point(RP4.X, RP1.Y);Point RP3 = new Point(RP1.X, RP4.Y);Rectangle rec1 = new Rectangle(RP1, CCSize); //lefttopRectangle rec2 = new Rectangle(RP2, CCSize); //righttopRectangle rec3 = new Rectangle(RP3, CCSize); //leftbuttomRectangle rec4 = new Rectangle(RP4, CCSize); //rightbuttom //填充顏色e.Graphics.FillEllipse(brushes, rec1);e.Graphics.FillEllipse(brushes, rec2);e.Graphics.FillEllipse(brushes, rec3);e.Graphics.FillEllipse(brushes, rec4);e.Graphics.FillPolygon(brushes, new Point[] { HP1, HP2, HP4, HP3 });e.Graphics.FillPolygon(brushes, new Point[] { WP1, WP2, WP5, WP6, WP4, WP3 });}}

總結

以上是生活随笔為你收集整理的winform仿QQ聊天气泡（c#代码+GDI绘图）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。