WPF speech bubble

Question

I'm currently creating a little soft where you can create your own Comic. I'm currently trying to add the speech bubbles. What i did is that i have put a Textbox inside a border with rounded corners.This is my result.

Now i would like to add an arrow that points towards the character speaking(Example of what i would like to get). The position of the arrow should be chosen by the user. It would like rotate around the border. I don't know if it's possible to do something like that. If it's not i'd like that the user could choose the direction of the arrow before adding the speech bubble(between the eight basic directions). Here is the code i use to create my bubbles :

 Border bdrBubble = new Border();
            bdrBubble.BorderThickness = new Thickness(2);
            bdrBubble.BorderBrush = Brushes.Black;
            System.Windows.Controls.TextBox txtBubble = new System.Windows.Controls.TextBox();

            txtBubble.Background = Brushes.White;
            txtBubble.TextWrapping = TextWrapping.Wrap;
            txtBubble.AcceptsReturn = true;
            txtBubble.Background = Brushes.Transparent;

            txtBubble.BorderThickness = new Thickness(0);
            txtBubble.Text = tbxBubble.Text;
            bdrBubble.CornerRadius = new CornerRadius(100);
            txtBubble.ClipToBounds = true;
            bdrBubble.Background = Brushes.White;
            bdrBubble.Padding = new Thickness(10);
            txtBubble.TextAlignment = TextAlignment.Center;
            bdrBubble.Child = txtBubble;

Hope someone could point me towards the best solution !

score 0 · Answer 1 · edited May 23 '17 at 12:26

There is no such existing functionality, but you can visit the following links and modify the following template as per your needs to change the direction of the arrow based on the co-ordinates.

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

Links: How to style WPF tooltip like a speech bubble?

How to implement Balloon message in a WPF application

I would need to do that in the behind code and not the xaml. But i will look to see if i can adapt it. Thanks ! — Nico, May 02 '17 at 13:14

WPF speech bubble

1 Answers1

Linked