Вам не нужен контрол кастомной формы. Вам просто нужно отрисовать облако с хвостиком нужного размера, и наложить текст внутри.
Возьмём исходную картинку и уберём из неё текст:

Это будет наш фон. Только надо, чтобы он изменял размеры не одинаково. Стандартная идея состоит в выделении нескольких областей:

Угловые области не должны меняться вовсе, верхняя и нижняя боковые должны растягиваться по горизонтали, левая и правая боковые — по вертикали, а центральная — в обеих направлениях. Раз верхняя и нижняя боковые картинки будут всё равно растягиваться в ширину, можно сделать их шириной в один пиксель, и точно так же левую и правую боковые — высотой в один пиксель. Центральную область можно вовсе сделать 1х1.
Для реализации этого в WPF заведём UserControl
:
<UserControl x:Class="ChatInterface.Bubble"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<!-- сетка 3х3 -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="11"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="17"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="11"/>
<RowDefinition Height="*"/>
<RowDefinition Height="11"/>
</Grid.RowDefinitions>
<!-- левый верхний уголок -->
<Image Source="bubbleNW.png" Grid.Row="0" Grid.Column="0"
RenderOptions.EdgeMode="Aliased" Stretch="None"/>
<!-- верхняя полоса -->
<Image Source="bubbleN.png" Grid.Row="0" Grid.Column="1"
RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
<!-- правый верхний уголок -->
<Image Source="bubbleNE.png" Grid.Row="0" Grid.Column="2"
RenderOptions.EdgeMode="Aliased" Stretch="None"/>
<!-- левая полоса -->
<Image Source="bubbleW.png" Grid.Row="1" Grid.Column="0"
RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
<!-- центр -->
<Image Source="bubbleC.png" Grid.Row="1" Grid.Column="1"
RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
<!-- и т. д. -->
<Image Source="bubbleE.png" Grid.Row="1" Grid.Column="2"
RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
<Image Source="bubbleSW.png" Grid.Row="2" Grid.Column="0"
RenderOptions.EdgeMode="Aliased" Stretch="None"/>
<Image Source="bubbleS.png" Grid.Row="2" Grid.Column="1"
RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
<Image Source="bubbleSE.png" Grid.Row="2" Grid.Column="2"
RenderOptions.EdgeMode="Aliased" Stretch="None"/>
</Grid>
</UserControl>
Теперь, нужно наложить на это текст. Абсолютно правильным путём было бы сделать декоратор с только что созданным контролом в фоне, но для этого нужны продвинутые знания WPF, так что мы пойдём более простым путём: заведём ещё один UserControl
. Небольшая хитрость заключается в том, что облако должно быть такого же размера, как и текст, так что придётся использовать Binding, и чтобы Bubble не влиял сам на лэйаут, засунем его, например, в Canvas
:
<UserControl x:Class="ChatInterface.BubbleWithText"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ChatInterface"
Name="root">
<Grid>
<Canvas>
<local:Bubble
Height="{Binding ActualHeight, ElementName=tb}"
Width="{Binding ActualWidth, ElementName=tb}"/>
</Canvas>
<TextBlock Name="tb" Padding="11" TextWrapping="Wrap"
Text="{Binding Text, ElementName=root}"/>
</Grid>
</UserControl>
В code-behind нужно положить свойство Text
:
public partial class BubbleWithText : UserControl
{
public BubbleWithText()
{
InitializeComponent();
}
#region dp string Text
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(BubbleWithText));
#endregion
}
Теперь можно засунуть наши элементы в StackPanel
:
<StackPanel Width="150">
<local:BubbleWithText Text="Я думаю, она дала тебе неправильный номер"/>
<local:BubbleWithText Text="А может быть и нет, кто их разберёт?"/>
</StackPanel>
и получить следующее:

Разумеется, исходные картинки лучше нарисовать самостоятельно (или потребовать у дизайнера), и ни в коем случае не сохранять в JPEG.
Если вы хотите сделать более правильно, используйте декоратор:
public class BubbleDecorator : Decorator
{
Bubble bubble = new Bubble();
public BubbleDecorator()
{
bubble.SetBinding(Bubble.WidthProperty, new Binding("ActualWidth")
{ Source = this });
bubble.SetBinding(Bubble.HeightProperty, new Binding("ActualHeight")
{ Source = this });
}
protected override Visual GetVisualChild(int index)
{
if (Child != null)
{
if (index == 0)
return bubble;
if (index == 1)
return Child;
}
throw new IndexOutOfRangeException("Wrong child index");
}
protected override Size ArrangeOverride(Size arrangeSize)
{
bubble.Arrange(new Rect(arrangeSize));
return base.ArrangeOverride(arrangeSize);
}
protected override int VisualChildrenCount { get { return Child == null ? 0 : 2; } }
}
Получаем такой XAML:
<StackPanel Width="150">
<local:BubbleDecorator HorizontalAlignment="Right" Margin="2">
<TextBlock Padding="13" TextWrapping="Wrap"
Text="Я думаю, она дала тебе неправильный номер"/>
</local:BubbleDecorator>
<local:BubbleDecorator HorizontalAlignment="Right" Margin="2">
<TextBlock Padding="13" TextWrapping="Wrap"
Text="А может быть и нет, кто их разберёт?"/>
</local:BubbleDecorator>
<local:BubbleDecorator HorizontalAlignment="Right" Margin="2">
<TextBlock Padding="13" TextWrapping="Wrap"
Text="Приффки!!1"/>
</local:BubbleDecorator>
</StackPanel>
