21

我需要创建一个带有圆角的矩形气泡，里面有文字，就像卡通语音气泡一样。我需要气泡根据其包含的文本大小水平和垂直扩展。我希望语音箭头和圆角的半径保持不变。

我可以简单地使用路径来创建我的气泡，但我无法调整气泡的大小并保持角半径和箭头不变......这是将调整大小的整个路径。

我很感激有人能指出我正确的方向。

删除了无效的 ImageShack 链接

这是卡通泡泡用户控件的最终版本。我在 Jobi Joy 的版本中添加了一个没有笔划的矩形来隐藏路径线的末端，而不是试图让然后看起来与矩形齐平。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="40"/>
    </Grid.RowDefinitions>
    <Rectangle Fill="#FF686868" Stroke="#FF000000" RadiusX="10" RadiusY="10"/>
    <Path Fill="#FF686868" Stretch="Fill" Stroke="#FF000000" HorizontalAlignment="Left" Margin="30,-5.597,0,-0.003" Width="25" Grid.Row="1" Data="M22.166642,154.45381 L29.999666,187.66699 40.791059,154.54395"/>                  
    <Rectangle Fill="#FF686868" RadiusX="10" RadiusY="10" Margin="1"/>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Text="Hello World" TextWrapping="Wrap"/>                       
</Grid>
4

2 回答 2

25

使用此 XAML，您可以创建 PopUp 或 ContentControl，并可以将此 Grid 作为其上的控件模板以获得一致的外观

<Grid x:Name="grid">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="40"/>
    </Grid.RowDefinitions>
    <Rectangle Fill="#FF686868" Stroke="#FF000000" RadiusX="10" RadiusY="10"/>
    <Path Fill="#FF686868" Stretch="Fill" Stroke="#FF000000" HorizontalAlignment="Left" Margin="30,-1.6,0,0" Width="25" Grid.Row="1" 
        Data="M22.166642,154.45381 L29.999666,187.66699 40.791059,154.54395"/>          
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Text="Hello World" TextWrapping="Wrap"/>           
</Grid>

删除了无效的 ImageShack 链接

我已经为此发表了一篇博文

于 2008-12-03T16:02:06.193 回答
1

圆角可以只是带有角锯齿设置的边框。

常量/语音箭头可以是与边界一起位于网格中的路径。

看一下 GroupBox 的控件模板，看看“标题”内容是如何定位到浮动在组框的边框上的。

除了将路径放置在底部而不是顶部之外，您将执行相同的操作。

于 2008-12-03T15:52:02.470 回答