如何在WinRT XAML中设计文字气球
本文关键字:文字 气球 XAML WinRT | 更新日期: 2023-09-27 18:03:21
我想创建一个像下图一样的气球。如何在WinRT XAML中设计文字气球?谢谢。
气球图片
<Grid Width="400">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="22*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Image}" Margin="10,2,10,0" Grid.Column="2" VerticalAlignment="Top" />
<Border BorderBrush="Black" BorderThickness="3" HorizontalAlignment="Right" VerticalAlignment="Top" CornerRadius="4">
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="bla bla bla..." Margin="5,10" IsTextSelectionEnabled="True" MaxWidth="280"/>
</Border>
给你
<Path Width="100" Fill="#4F81BD" Stretch="uniform" Stroke="#385D8A" StrokeThickness="3" Data="M 100,119 C 102,109 107,101 120,100 L 220,100 C 231,101 241,110 240,120 L 241,159 C 241,170 230,180 220,180 L 120,180 C 111,180 100,171 100,160 L 100.5,139.5 L 70,120 Z"/>
可根据使用情况进行调整
你可以使用它作为背景刷,绘制图像,几何图形,甚至不透明度蒙版,如果你寻找特殊效果。
给你的样品
<Border HorizontalAlignment="Right" VerticalAlignment="Top" >
<TextBlock MaxWidth="280"
HorizontalAlignment="Right"
Margin="30,10,10,10"
Text="bla bla bla..."
TextWrapping="Wrap"/>
<Border.Background>
<DrawingBrush>
<DrawingBrush.Drawing>
<GeometryDrawing Brush="#4F81BD">
<GeometryDrawing.Pen>
<Pen Brush="#385D8A" Thickness="6"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<PathGeometry Figures="M 100,119 C 102,109 107,101 120,100 L 220,100 C 231,101 241,110 240,120 L 241,159 C 241,170 230,180 220,180 L 120,180 C 111,180 100,171 100,160 L 100.5,139.5 L 70,120 Z"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.Background>
</Border>
样本2 <Grid HorizontalAlignment="Center" VerticalAlignment="center">
<Path
Width="100"
Data="M 100,119 C 102,109 107,101 120,100 L 220,100 C 231,101 241,110 240,120 L 241,159 C 241,170 230,180 220,180 L 120,180 C 111,180 100,171 100,160 L 100.5,139.5 L 70,120 Z"
Fill="#4F81BD"
Stretch="uniform"
Stroke="#385D8A"
StrokeThickness="3"/>
<TextBlock
MaxWidth="280"
Margin="30,15,10,10"
Text="bla bla bla..."
TextWrapping="Wrap"/>
</Grid>