wpfrichtextboxwindowsformshost

How to Set inline Images Vertically Center in RichTextBox


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

enter image description here

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

enter image description here

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

Solution

  • 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);
        }