C# WPF - Make Polygon encapsulate text

Question

I'm working on a chat client and I'm having a bit of trouble making it look pretty. I have a polygon defined as this:

<Polygon
Points="0,25 5,27 5,35 200,35 200,15 5,15 5,23 0,25"
Stroke="Purple"
Margin="4, 0, 4, 0">
    <Polygon.Fill>
        <SolidColorBrush Color="#e4eef2" />
    </Polygon.Fill>
</Polygon>

This polygon makes a chat message window similar to the one Skype uses.

A textblock is used directly below it to display the text.

<TextBlock FontSize="14" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12, 0, 4, 0" TextWrapping="WrapWithOverflow" Text="{Binding text}"/>

If the text is too long and wraps, it falls outside of the polygon. Also, there may be multi-line text, which also falls outside of the polygon. Finally, I'm having trouble getting the polygon to extend the full width of the listitem it is contained in.

The full code is below.

    <ListBox Grid.Column="2" Name="MessageList" ScrollViewer.HorizontalScrollBarVisibility="Disabled"> <!-- Messages -->
        <ListBox.ItemTemplate>
            <DataTemplate>
                <DockPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="True">
                    <Image Visibility="{Binding visibility}" Height="50" Width="50" Stretch="Fill" Source="sampleavatar.png"/>
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Polygon
                        Points="0,25 5,27 5,35 200,35 200,15 5,15 5,23 0,25"
                        Stroke="Purple"
                        Margin="4, 0, 4, 0">
                            <Polygon.Fill>
                                <SolidColorBrush Color="#e4eef2" />
                            </Polygon.Fill>
                        </Polygon>
                        <TextBlock FontSize="14" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12, 0, 4, 0" TextWrapping="WrapWithOverflow" Text="{Binding text}"/>
                    </Grid>
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

How a message should look, except it should be more centered

Even less centered text when there's no avatar

Text wrapping, also notice the polygon doesn't shrink horizontally(Nor does it grow horizontally when the listboxitem is bigger)

Answer 1

What you can do, is use a combination of Polygons and a TextBox (read only) to achieve what you want.

The key point here is you want the polygon to grow whenever the text grows/wraps. So to get this to work, we can use a TextBox's border, and a combination of polygons to get the triangle.

See below:

   <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Polygon Grid.Column="0"
                 x:Name="Polygon"
                 Points="8,0 0,5, 8,10" 
                 Stroke="Purple" 
                 Fill="#e4eef2"
                 StrokeThickness="2"
                 VerticalAlignment="Center"
                 Margin="2,2,-4,0"/>
        <Polygon Grid.Column="1"
                 Panel.ZIndex="10"
                 Points="8,0 0,5, 8,10" 
                 Stroke="#e4eef2" 
                 Fill="#e4eef2"
                 StrokeThickness="2"
                 VerticalAlignment="Center"
                 HorizontalAlignment="Left"
                 Margin="-2.5,2,0,0"/>
        <TextBox Grid.Column="1"
                 Background="#e4eef2"
                 BorderBrush="Purple"
                 BorderThickness="2,2,2,2" 
                 VerticalAlignment="Center" 
                 Padding="8,0,8,0" 
                 FontSize="14" 
                 Width="auto" 
                 TextWrapping="WrapWithOverflow" 
                 Text="This is a test"
                 IsReadOnly="True"/>
    </Grid>

Answer 2

Your polygon is not going to shrink horizontally with the text because that is actually a different polygon, I think an option is to scale the polygon horizontally or vertically or both which might require some IValueConverters.

Start with this,

   <Border VerticalAlignment="Center" BorderThickness="0,1,1,1" BorderBrush="Purple" CornerRadius="5">
            <TextBlock x:Name="textBlock"
                FontSize="14" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12, 0, 0, 0" TextWrapping="WrapWithOverflow" Text="blah blah blah blah blah blah blah blah blah "/>
        </Border>

Then add your curly thing to the left side.