How can I insert an image into a WPF RichTextBox at runtime in between text so the text floats around the image

Question

I am trying to insert an image into a WPF RichTextBox at runtime in between text so the text floats around. I tried using a floater but the end result is that only one line can be set next to the image and the rest of the content shifts to the bottom.

This is the code I have so far for inserting the image:

    private Image SelectImage()
    {
        CommonDialog dialog = new CommonDialog();
        dialog.InitialDirectory =  System.Environment.SpecialFolder.MyDocuments.ToString();
        dialog.Filter.Add( new FilterEntry( Properties.Resources.StrImageFormats, "*.jpg;*.jpeg;*.gif;*.png" ) );
        dialog.Title = Properties.Resources.StrSelectImage;

        if ( dialog.ShowOpen() )
        {
            string filePath = dialog.FileName;
            BitmapImage bitmap = new BitmapImage( new Uri( filePath, UriKind.Absolute ) );
            Image image = new Image();
            image.Source = bitmap;
            image.Width = bitmap.Width;
            image.Height = bitmap.Height;
            return image;
        }
        return null;
    }

    private void ButtonInsertImage_Click( object sender, RoutedEventArgs e )
    {
        Image image = SelectImage();
        if ( image != null )
        {
            TextPointer tp = RTB.CaretPosition.GetInsertionPosition( LogicalDirection.Forward );
            Floater floater = new Floater( new BlockUIContainer( image ), tp );
        }
    }

But when I set my cursor in between the text, the previous code inserts the image on a new line and the rest of the text comes after the image. A little bit like this:

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
[IMAGE COMES HERE]
[IMAGE COMES HERE]
[IMAGE COMES HERE]
[IMAGE COMES HERE]
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

How can I insert the image so the text floats around the image (multiple lines off text to the right and the left of the image)?

If anybody has any notion of how to do that, I would love to here it. Thank you soo much.

Answer 1

This is one of those that's easy when you know how. After the line in your code where you create the Floater, add this:

floater.HorizontalAlignment = HorizontalAlignment.Center;
floater.Width = bitmap.Width;

You'd expect the Floater to set it's width depending on the size of the contents, but since it might be text that you want to wrap, it can't. You have to set the width explicitly.