C#自定义UserControl聊天气泡无法自动适配文本大小问题

问题根源 #

你的聊天气泡高度固定不随文本变化，核心原因有三个：

• 使用CreateGraphics().MeasureString计算高度时未传入最大宽度参数，只能得到单行文本高度，无法识别换行
• Label的AutoSize设为false后，失去了自动调整多行高度的能力，且未绑定正确的尺寸计算逻辑
• UserControl的高度赋值逻辑错误，没有基于Label实际渲染后的高度同步更新

修复后的完整代码 #

SenderBubble 自定义控件修改

public partial class SenderBubble : UserControl
{
    public SenderBubble()
    {
        InitializeComponent();
        // 配置Label支持多行自动换行
        label1.AutoSize = true;
        label1.MaximumSize = new Size(250, 0); // 限制气泡最大宽度，可按需调整
        label1.TextAlign = ContentAlignment.MiddleLeft;
        label1.Dock = DockStyle.Fill; // 让Label填充UserControl，避免布局偏移
        this.AutoSize = true;
        this.AutoSizeMode = AutoSizeMode.GrowAndShrink;
        this.Padding = new Padding(10); // 给气泡添加内边距，避免文本贴边
    }

    [Editor("System.ComponentModel.Design.MultilineStringEditor, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]
    public string Body
    {
        get => label1.Text;
        set
        {
            label1.Text = value;
            UpdateBubbleSize();
        }
    }

    public string Time { get; set; }
    public Color TimeColor { get; set; } = Color.Black;

    private void UpdateBubbleSize()
    {
        // 使用TextRenderer更准确计算WinForm文本尺寸
        Size textSize = TextRenderer.MeasureText(label1.Text, label1.Font, label1.MaximumSize, TextFormatFlags.WordBreak);
        // 同步Label和UserControl的尺寸（结合Padding）
        label1.Size = textSize;
        this.Size = new Size(textSize.Width + this.Padding.Left + this.Padding.Right, 
                            textSize.Height + this.Padding.Top + this.Padding.Bottom);
    }

    // 重写OnPaint确保圆角随尺寸更新
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        // 基于UserControl的客户区创建圆角路径（去掉Padding后的区域）
        Rectangle bubbleRect = new Rectangle(this.Padding.Left, this.Padding.Top, 
                                            this.ClientSize.Width - this.Padding.Left - this.Padding.Right,
                                            this.ClientSize.Height - this.Padding.Top - this.Padding.Bottom);
        GraphicsPath path = RoundedRectangle.Create(bubbleRect, 8, RoundedRectangle.RectangleCorners.All);
        this.Region = new Region(path);
    }
}

窗体中添加气泡的调用逻辑修改

// 用面板的ClientSize.Y作为初始基准，避免布局偏移
int baseY = bublePanel.ClientSize.Y;

private void HandleUserChats(string message)
{
    SenderBubble bubble = new SenderBubble();
    bubble.Time = DateTime.Now.ToString("HH:mm");
    bubble.TimeColor = Color.Black;
    bubble.Body = message;
    
    // 设置气泡最大宽度为面板宽度的70%，避免过宽
    int maxBubbleWidth = (int)(bublePanel.ClientSize.Width * 0.7);
    bubble.label1.MaximumSize = new Size(maxBubbleWidth, 0);
    
    // 计算气泡右侧对齐的位置，保留10px右侧间距
    bubble.Left = bublePanel.ClientSize.Width - bubble.Width - 10;
    bubble.Top = baseY;
    
    bublePanel.Controls.Add(bubble);
    // 更新下一个气泡的Y坐标，加上气泡高度和8px间距
    baseY += bubble.Height + 8;
    
    bublePanel.ScrollControlIntoView(bubble);
    txt_msg_box.Clear();
    txt_msg_box.Focus();
}

关键修改说明 #

1. Label配置优化：

   • 开启AutoSize让Label自动根据文本换行调整高度
   • 设置MaximumSize限制气泡宽度，强制文本换行
   • 用DockStyle.Fill结合Padding实现气泡内边距，避免文本贴边

2. 文本尺寸计算：

   • 改用TextRenderer.MeasureText替代CreateGraphics().MeasureString，适配WinForm文本渲染规则，准确计算多行高度
   • 传入TextFormatFlags.WordBreak确保文本自动换行

3. 圆角区域更新：

   • 把圆角Region设置在UserControl上，避免Label尺寸变化时圆角失效
   • 计算圆角区域时考虑Padding，保证圆角和内边距匹配

4. 气泡布局逻辑：

   • 限制气泡最大宽度为面板的70%，优化视觉体验
   • 给气泡添加右侧间距和上下间距，避免布局拥挤

内容的提问来源于stack exchange，提问作者Denis Morgan