如何在UWP中创建气泡？ [英] How to create a speech bubble in UWP?

问题描述

我正在创建一个聊天应用程序，并且希望创建一个包含每个消息的典型气泡。我在Blend（在XAML中）中创建了这样的Path对象：

I'm creating a chat application and would like to create the typical speech bubble that contains each message. I created a Path object in Blend (in XAML) like this:

问题是路径被设计为具有指定的宽度和高度，我希望它环绕文本而不拉伸，因此它不会看起来像变形

The problem is that the path is has designed to have a specified width and height and I would like it to wrap around the text without stretching, so it won't look deformed, like a border does.

如何使其表现出自己想要的效果？

How can I make it behave like I want?

推荐答案

您可以将 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>

如下所示：

< a href = https://i.stack.imgur.com/IfNr1.png rel = nofollow noreferrer>

编辑：

版本边框：

<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 会更好，但这可以工作：

This is probably not the easiest and the best way how to do this, maybe Path will be better to do this, but it works:

这篇关于如何在UWP中创建气泡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！