Reputation: 4185
In Blend I created a Path that looks like a Speech Bubble. I would like to use this path as a style or template for a TextBox or TextBlock (I don't care which as this will always be used for read-only text). How would I apply the path to a TextBox or TextBlock to create my own style or template?
The Path XAML:
<Path Data="M27.499998,2.5 L218,2.5 C231.80711,2.5000005 243,13.692882 243,27.500002 L243,114.5 C243,128.30711 231.80711,139.5 218,139.5 L176.86046,139.5 176.77534,140.60143 C173.04614,179.27731 126.53165,183.52524 126.53165,183.52524 143.526,165.98947 145.27682,147.30386 145.22961,139.96802 L145.222,139.5 27.499998,139.5 C13.692882,139.5 2.5,128.30711 2.5,114.5 L2.5,27.500002 C2.5,13.692882 13.692882,2.5000005 27.499998,2.5 z"
Fill="#FF5E9E5B"
HorizontalAlignment="Left"
Height="186.025"
Stretch="Fill"
Stroke="Black"
StrokeThickness="5"
VerticalAlignment="Top"
Width="245.5" />
SOLUTION: (thanks to Chris W. answer)
In case someone comes across this, here is how I implemented the solution to create a textbox speech bubble that auto sizes to the content.
In StylesDictionary.xaml:
<Style x:Key="SpeechBubbleTextBoxStyle" TargetType="{x:Type ContentControl}">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Margin" Value="10" />
<!-- Add additional Setters Here -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox Text="{TemplateBinding Content}"
VerticalAlignment="Top"
HorizontalAlignment="Stretch"
Padding="10"
TextWrapping="Wrap"
BorderBrush="Black"
BorderThickness="2"
Background="#FF5E9E5B"
Grid.Row="0">
<TextBox.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="15" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="3" />
</Style>
</TextBox.Resources>
</TextBox>
<Path Data="M332,212.5 C332,250.00012 294.00041,254.50014 294.00041,254.50014 312.91688,228.75005 308.39508,212.54091 308.39508,212.54091"
Fill="#FF5E9E5B"
HorizontalAlignment="right"
VerticalAlignment="Top"
Height="34"
Width="43"
Margin="0,-3,50,0"
Stretch="Fill"
Stroke="Black"
StrokeThickness="2"
UseLayoutRounding="True"
Grid.Row="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then in my UserControl I call it like this:
<ContentControl Style="{StaticResource SpeechBubbleTextBoxStyle}"
Content="{Binding InstructionsText}" />
The result looks like this:
Upvotes: 1
Views: 1386
Reputation: 23290
If it were me, I'd just chuck it into a template like;
<Window.Resources>
<Style x:Key="ChatBubbleThingy" TargetType="{x:Type ContentControl}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="10"/>
<!-- Add additional Setters Here -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<Grid>
<Path Data="M27.499998,2.5 L218,2.5 C231.80711,2.5000005 243,13.692882 243,27.500002 L243,114.5 C243,128.30711 231.80711,139.5 218,139.5 L176.86046,139.5 176.77534,140.60143 C173.04614,179.27731 126.53165,183.52524 126.53165,183.52524 143.526,165.98947 145.27682,147.30386 145.22961,139.96802 L145.222,139.5 27.499998,139.5 C13.692882,139.5 2.5,128.30711 2.5,114.5 L2.5,27.500002 C2.5,13.692882 13.692882,2.5000005 27.499998,2.5 z"
Fill="#FF5E9E5B"
Height="186.025"
Stretch="Fill"
Stroke="Black"
StrokeThickness="5"
Width="245.5" />
<TextBlock Text="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Then invoke it like;
<ContentControl Style="{StaticResource ChatBubbleThingy}"
Content="Blah Blah Blah Blah"/>
You'd have to adjust it a bit to get it to appear exactly how you want, but you get the idea. Hope this helps, cheers.
P.S. - If you wanted to throw it in a TextBox template or something that's easy too.
Upvotes: 1