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

• 寫(xiě)個(gè)聊天氣泡
• • 最后效果
  • 用到的組件
  • 步驟
  • 部分代碼（后臺(tái)）

寫(xiě)個(gè)聊天氣泡

最近學(xué)習(xí)c#編程時(shí)突然想自己寫(xiě)一個(gè)仿QQ的聊天程序，構(gòu)思的時(shí)候可能沒(méi)想周全，真正動(dòng)手時(shí)卻發(fā)現(xiàn)不會(huì)的東西太多了，也試過(guò)找網(wǎng)上的源碼看，然而我這個(gè)初學(xué)者來(lái)說(shuō)，超過(guò)200行的代碼就形同天書(shū)了，所以只能東拼西湊+自己摸索著寫(xiě)，諸多問(wèn)題中，如何用winform自帶的控件實(shí)現(xiàn)聊天氣泡算是一個(gè)不小的難點(diǎn)了，下面是我自己摸索的解決方案，有點(diǎn)撈，但好歹能跑起來(lái)，發(fā)出來(lái)和大家共同進(jìn)步吧。

最后效果

用到的組件

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

步驟

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

2、從工具箱把需要的控件一個(gè)一個(gè)拖進(jìn)來(lái)；

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

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

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

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

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

注1：之所以不用Label來(lái)顯示文字，是因?yàn)長(zhǎng)abel不能聚焦，所以無(wú)法使用鼠標(biāo)來(lái)選中文字進(jìn)行復(fù)制，如果沒(méi)有這種需要，建議使用Label來(lái)繪制背景框（TextBox沒(méi)有Paint事件，必須添加Panel作為背景）。

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

注3：如果想自己調(diào)整背景框的大小，建議徒手畫(huà)一個(gè)圖，如下：

部分代碼（后臺(tái)）

代碼僅供參考（寫(xiě)的有點(diǎn)撈，請(qǐng)大佬輕點(diǎn)兒噴）
由于我的項(xiàng)目還沒(méi)有寫(xiě)完，這個(gè)代碼只是單獨(dú)的控件代碼，并沒(méi)有和主界面交互的內(nèi)容，各位可以根據(jù)自己的需要復(fù)制下來(lái)修改。

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

public partial class Bubble : UserControl{int _W, _H; //氣泡的寬度、高度Size CCSize; //CornerCircleSizeControl TextC;Color color; //背景顏色/// <summary>/// 構(gòu)造函數(shù)，對(duì)所需參數(shù)賦值/// </summary>public Bubble(){InitializeComponent();color = Color.FromArgb(255, 160, 160); //邊框顏色TextC = this.textBox1; //文本欄CCSize = new Size(16, 16); //過(guò)渡圓角對(duì)應(yīng)的矩形大小}/// <summary>/// 調(diào)整氣泡及其內(nèi)部組件的大小和布局/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void Bubble_Load(object sender, EventArgs e){ this.textBox1.Text = "這是一個(gè)測(cè)試用的消息\r\n這是第二行的文字";TextBoxAutosization();#region 設(shè)置圖片框?yàn)閳A形的代碼GraphicsPath gp = new GraphicsPath();gp.AddEllipse(pictureBox1.ClientRectangle);Region region = new Region(gp);pictureBox1.Region = region;gp.Dispose();region.Dispose();#endregion//文本框大小，和文本欄大小相關(guān)this.panel1.Size= new Size(this.textBox1.Width + CCSize.Width + 9, this.textBox1.Height + CCSize.Height +1); //文本欄背景顏色，和文本框顏色相同this.textBox1.BackColor = color;#region 設(shè)置氣泡的大小的代碼_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 調(diào)整內(nèi)部組件的布局的代碼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>/// 根據(jù)文字內(nèi)容調(diào)整氣泡文本欄大小/// </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);//定位中間十字區(qū)域需要的八個(gè)點(diǎn)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); //定位側(cè)邊小三角形需要的三個(gè)點(diǎn)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); //定位過(guò)渡圓角需要的四個(gè)矩形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 });}}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。