如何在WinRT XAML中设计单词气球?[英] How to design words balloon in WinRT XAML?

本文是小编为大家收集整理的关于如何在WinRT XAML中设计单词气球?的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

本文来自:IT宝库(https://www.itbaoku.cn)

我试图创建单词气球的图像如下图.如何在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>

本文地址:https://www.itbaoku.cn/post/2353481.html

问题描述

I am trying to create words balloon looks like below image. How to design words balloon in WinRT XAML? Thanks.

balloon image

<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>

推荐答案

Here you go

<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"/>

You may adjust according to your use

You can use it as background brush, drawing image, geometry and even opacity mask if you look for special effects.

sample for you

<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>

sample 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>