How to Set inline Images Vertically Center in RichTextBox

Question

I am working on WPF, i am display RichText data in RichTextBox for that have taken WindowsFormHost, inside that i am taking WinForm RichTextBox to display RichTextData which have Images + Text.

But while display that RichTextData images are align to Top and text are align to Bottom, See in Image below, red circle is RichTextImage

i want to display images and Text in center. Like Below Image, the Red Circle is RichTextImage that is coming in center with text.

My XAML Code is:

<Window x:Class="WPFRichTextBox.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
    Title="MainWindow" Height="600" Width="800" Background="LightBlue" xmlns:my="clr-namespace:WPFRichTextBox">

<Grid Loaded="Grid_Loaded">

    <WindowsFormsHost Margin="0,424,0,22">

        <wf:RichTextBox   Text="RichTextBox" x:Name="richTbTest1" BorderStyle="None" Enabled="True" ForeColor="Black" Width="550" Multiline="True" />


   </WindowsFormsHost>

  </Grid>
</Window>

I have used WPF RichTextBox also, but in that also i am not able to Align text+Images in Center

     <RichTextBox VerticalContentAlignment="Stretch" Height="158" HorizontalAlignment="Left" Margin="10,247,0,0" Name="richTextBox1" VerticalAlignment="Top" Width="754" />

Friedrick

Answer 1

You can use BaselineAlignment on a Run to center align the text. Here is an example:

<RichTextBox>
    <FlowDocument>
        <Paragraph>
            <Run Text="Some text" BaselineAlignment="Center"/>
            <Image Height="100" Width="100" Source="Images\Desert.jpg"/>
            <Run Text="Some more text" BaselineAlignment="Center"/>
        </Paragraph>
        <Paragraph/>
        <Paragraph>
            <Run Text="Paragraph 2" BaselineAlignment="Center"/>
            <Image Height="100" Width="100" Source="Images\Desert.jpg"/>
            <Run Text="More text" BaselineAlignment="Center"/>
        </Paragraph>
    </FlowDocument>
</RichTextBox>

EDIT:

To apply the formatting to the entire RichTextBox try calling this method after the RichTextBox is populated:

    public void CenterText()
    {
        var text = new TextRange(rtb.Document.ContentStart, rtb.Document.ContentEnd);
        text.ApplyPropertyValue(Inline.BaselineAlignmentProperty, BaselineAlignment.Center);
    }

Buyer

Thanks, I tried this but i am not inserting Image and text manually, I have RTF data with text and Image in my database from there i have to bind this RichTextBox – Friedrick

Thank you very, text is coming in center now, but Format of Text has gone – Friedrick

That CentreText is working on WPF RichTextBox, i am using WinForm RichTextBox for better formatting of text & images by WindowsFormHost control of WPF – Friedrick

Answer 2

I was able to get this working with a Span with the BaseAlignment attribute set to "Center".

<RichTextBox>
  <FlowDocument>

      <Paragraph>
          <Span BaseAlignment="Center">
             Center My Image
             <Image ... />
          </Span>
      </Paragraph>

  </FlowDocument>
</RichTextBox>

Hellebore