首页 > 编程知识 正文

winform仿QQ聊天气泡(c#代码+GDI绘图)

时间:2023-05-03 06:37:44 阅读:232873 作者:964

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; //CornerCircleSize Control 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 = "这是一个测试用的消息rn这是第二行的文字"; 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); //lefttop Rectangle rec2 = new Rectangle(RP2, CCSize); //righttop Rectangle rec3 = new Rectangle(RP3, CCSize); //leftbuttom Rectangle 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 }); } }

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。