如何创建一个定制的WPF控件,如具有恒定角的卡通泡泡

问题描述:

我需要创建一个带圆角的矩形泡泡,里面有文字,如卡通语音泡泡。我需要气泡水平和垂直扩展,具体取决于它包含的文本的大小。我希望演讲箭头和圆角的半径保持不变。如何创建一个定制的WPF控件,如具有恒定角的卡通泡泡

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

我会很感激,有人可以指出我在正确的方向。

除去死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> 

使用此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的链接

我已经取得了blog post on this

圆角可以只是一个具有拐角别名设置的边框。

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

看一下GroupBox的控件模板,看看“Header”内容是如何定位在组框边框上的。

你会做同样的事情,除了你会在底部而不是顶部放置一个路径。