WPF C#聊天机器人：动态向响应网格追加TextBlock问题

我来帮你解决这个聊天消息覆盖的问题！

问题出在你直接把新的StackPanel添加到Grid的Children集合里——Grid默认的布局行为是让所有子元素都堆叠在左上角的同一位置，所以新消息会直接覆盖旧的。要实现类似WhatsApp的垂直追加效果，我们需要用一个自带垂直排列功能的容器来管理所有消息项。

解决方案步骤： #

1. 修改XAML，添加消息容器和滚动支持

首先，在你的Responce Grid内部，添加一个ScrollViewer包裹的StackPanel。StackPanel会自动垂直排列子元素，ScrollViewer则能在消息过多时提供滚动能力：

<Grid x:Name="Responce" HorizontalAlignment="Left" Height="315" VerticalAlignment="Top" Width="422" Margin="10,10,0,0">
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
        <StackPanel x:Name="MessagesStackPanel" Orientation="Vertical" />
    </ScrollViewer>
</Grid>

2. 调整C#代码，直接追加消息到StackPanel

现在不需要每次创建新的StackPanel了，直接创建消息文本块，然后添加到MessagesStackPanel的Children里。另外我还加了一些细节优化，让聊天气泡更美观：

private void CustomerReply(string sms)
{
    var textBlock = new TextBlock();
    var bc = new BrushConverter();
    
    // 保留你原来的文本块样式设置
    textBlock.Text = sms;
    textBlock.HorizontalAlignment = HorizontalAlignment.Right;
    textBlock.VerticalAlignment = VerticalAlignment.Top;
    textBlock.FontSize = 12;
    textBlock.Foreground = new SolidColorBrush(Colors.Black);
    textBlock.TextAlignment = TextAlignment.Left;
    textBlock.Background = (Brush)bc.ConvertFrom("#e0fcc4");
    textBlock.FontFamily = new FontFamily("Helvetica Neue");
    textBlock.FontStretch = FontStretches.UltraExpanded;
    textBlock.FontStyle = FontStyles.Normal;
    textBlock.Typography.NumeralStyle = FontNumeralStyle.OldStyle;
    textBlock.Typography.SlashedZero = true;
    
    // 优化：添加边距让气泡之间有间隔
    textBlock.Margin = new Thickness(0, 5, 10, 5);
    // 优化：允许文本换行，避免超出容器宽度
    textBlock.TextWrapping = TextWrapping.Wrap;
    // 优化：限制气泡最大宽度，防止过宽影响美观
    textBlock.MaxWidth = Responce.Width - 40;
    
    // 将文本块添加到消息容器中，自动追加到下方
    MessagesStackPanel.Children.Add(textBlock);
    
    // 优化：自动滚动到最新消息位置
    var scrollViewer = Responce.Children.OfType<ScrollViewer>().FirstOrDefault();
    scrollViewer?.ScrollToBottom();
}

为什么这样能解决问题？ #

• StackPanel的Orientation="Vertical"会自动把每个新添加的元素放在前一个元素的下方，完全符合聊天软件的消息排列需求。
• ScrollViewer确保当消息数量超过容器高度时，用户可以滚动查看历史消息。
• 额外的样式优化让聊天界面更贴近WhatsApp的体验，比如边距、换行和自动滚动。

现在再测试你的CustomerReply方法，新消息就会乖乖追加在旧消息的下方，不会再覆盖啦！

内容的提问来源于stack exchange，提问作者Ahmad Kabeer