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

Question

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

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

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

Answer 1

您可以Polygon结合使用StackPanel:

<StackPanel Orientation="Horizontal"
            HorizontalAlignment="Left"
            Padding="6"
            >
    <Polygon Points="0,0 15,0 15,15"
             Fill="LightGray"
             Margin="0,10,0,0"
             />

    <Border Background="LightGray"
            CornerRadius="3"
            Padding="6"
            VerticalAlignment="Top"
            >
        <TextBlock Text="Text"
                   TextWrapping="WrapWholeWords"
                   Width="100"
                   Height="50"
                   />
    </Border>
</StackPanel>

看起来像这样:

编辑:

带边框的版本:

<Grid HorizontalAlignment="Left"
      Padding="6"
      >
    <Polygon Points="0,0 15,0 15,15"
             Fill="LightGray"
             Stroke="Black"
             Margin="0,10,0,0"
             />

    <Border Background="LightGray"
            BorderBrush="Black"
            BorderThickness="0.5"
            CornerRadius="3"
            Padding="6"
            Margin="14,0,0,0"
            VerticalAlignment="Top"
            >
        <TextBlock Text="Text"
                   TextWrapping="WrapWholeWords"
                   Width="100"
                   Height="50"
                   />
    </Border>

    <Polygon Points="0,0 15,0 15,15"
             Fill="LightGray"
             Margin="0,10,0,0"
             />
</Grid>

这可能不是最简单和最好的方法,可能Path会更好,但它的工作原理: