如何创建一个自定义的WPF控件，比如具有固定圆角的卡通气泡形状？

Question

我需要创建一个带有圆角的矩形气泡，内部有文字，就像卡通漫画中的话语气泡。我需要气泡根据所包含文本的大小在水平和垂直方向上扩展。我希望气泡的箭头和圆角半径保持不变。

我可以使用路径简单地创建我的气泡，但是我无法调整气泡的大小并保持圆角半径和箭头不变，因为整个路径都会被调整大小。

我希望有人能够指导我正确的方向。

这是卡通气泡用户控件的最终版本。我已经添加了一个没有描边的矩形来隐藏路径线的末端，而不是试图使它们与矩形外观相同。

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

- Frederic

Answer 1

通过使用这段XAML代码，您可以创建一个弹出窗口或ContentControl，并将其作为控件模板应用于其中，以获得一致的外观。

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

我在博客文章中介绍了这个。

- Jobi Joy

---

我认为这种方法无法根据情况将对话气泡指向正确的位置。使用这种方法，对话气泡的指向可能会放置在错误的位置。 - Willy

Answer 2

圆角可以通过设置角别名的边框来实现。

常量/语音箭头可以是一个路径，与边框一起在网格中定位。

查看GroupBox的控件模板，看看如何将“Header”内容定位到组框的边框上方。

您可以做同样的事情，只是将路径定位在底部而不是顶部。

- Bogdan Varlamov