如何在UWP中创建一个讲话泡泡?

我正在创建一个聊天应用程序,并希望创建包含每条消息的典型语音气泡。 我在Blend中创建了一个Path对象(在XAML中),如下所示:

在此处输入图像描述

问题是路径设计为具有指定的宽度和高度,我希望它能够在不拉伸情况下环绕文本 ,因此它不会像边框那样看起来变形。

我怎样才能让它表现得像我想要的那样?

您可以将PolygonStackPanel结合使用:

       

看起来像这样:

截图1

编辑:

带边框的版本:

        

这可能不是最简单和最好的方法,也许Path会更好地做到这一点,但它的工作原理:

截图2

这是一个Custom控件,它声明Text的Dependency属性,并在其模板(Background,Width,Heigth)中重用基本控件的一些属性。

首先是类定义:( SpeechBubbleControl.xaml.cs

 [TemplatePart(Name = PartBubbleText, Type = typeof(TextBlock))] public sealed partial class SpeechBubbleControl : Control { private const string PartBubbleText = "BubbleText"; public static readonly DependencyProperty TextProperty = DependencyProperty.Register(nameof(Text), typeof(string), typeof(SpeechBubbleControl), new PropertyMetadata("")); public SpeechBubbleControl() { DefaultStyleKey = typeof(SpeechBubbleControl); } public string Text { get { return GetValue(TextProperty).ToString(); } set { SetValue(TextProperty, value); } } } 

使用其默认模板( SpeechBubbleControl.xaml ):

    

您必须使用app.xaml类似内容将此资源导入应用程序资源:

          

最后是一个示例测试页面,它使用此控件绑定宽度,高度(基于滑块)和必须显示的文本。

                    

结果如下:

最终结果:基本绑定测试的泡沫

请注意,我的答案改编自这一点: WPF语音泡沫