How can I insert an image in WPF RichTextBox at run time between text so that the text floats around the image

Question

I am trying to insert an image into a WPF RichTextBox at run time between text so that 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 is shifted down.

This is the code that I still used to insert 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 place the cursor between the text, the previous code inserts the image in a new line, and the rest of the text appears after the image. Like a little:

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Assimilation and minimum stay, quis nostrud, exercise according to need. 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 irrelevant, lit in culpa qui officia deserunt mollit anim id est laborum. "

How can I insert an image so that the text floats around the image (a few lines from the text to the right and left of the image)?

If anyone has an idea on how to do this, I would like to be here. Thanks a lot.

Answer 1

This is one of those that is easy when you know how to do it. After the line in the code where you create the Floater, add the following:

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

You expect Floater to set its width based on the size of the content, but since it may be the text you want to wrap, it cannot. You must explicitly set the width.