如何在 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
结合使用:
You may use Polygon
in combination with 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
会更好地做到这一点,但它有效:
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屋!