none
How to change line height/spacing in RichTextBox RRS feed

  • Question

  • I need to use RichTextBox to display justified text and images. Most things work fine. However, I have a difficult time to change its line height or line spacing. Neither RichTextBox.LineHeight nor FontFamily.LineSpacing is available on WP7. Any idea? Hack? Workaround? Thanks!
    Saturday, February 25, 2012 10:22 AM

Answers

  • Hi,
    A workaround is to use the WebBrowser control instead, and point it to a local HTML resource in Isolated Storage.
    http://msdn.microsoft.com/en-us/library/ff431811(v=VS.92).aspx

    - Mark
    • Marked as answer by Ren Xu Tuesday, August 21, 2012 9:17 PM
    Monday, February 27, 2012 6:59 PM
  • This is a terrible hack, but as a workaround you can insert empty Run elements with FontSize into your content. Insert them at regular intervals, closely spaced enough that at least one Run will occur in each text line displayed. It will effectively increase the line height to match the FontSize of the Run element. Works only for increasing the line height.

                    <RichTextBox TextWrapping="Wrap"
                        <Paragraph> 
                            <Run FontSize="40"></Run> Lorem ipsum dolor sit amet, consectetur 
                            <Run FontSize="40"></Run> elit, sed do eiusmod tempor incididunt ut la 
                            <Run FontSize="40"></Run>bore et dolore magna aliqua. Ut eni 
                            <Run FontSize="40"></Run>m ad minim veniam, quis nostrud exercita 
                            <Run FontSize="40"></Run>tion ullamco laboris nisi ut aliquip ex ea comm 
                            <Run FontSize="40"></Run>odo consequat. 
                            <Run FontSize="40"></Run> 
                        </Paragraph> 
                    </RichTextBox> 


    Richard Woo
    • Marked as answer by Ren Xu Tuesday, August 21, 2012 9:17 PM
    Monday, February 27, 2012 8:14 PM

All replies

  • Hi,
    A workaround is to use the WebBrowser control instead, and point it to a local HTML resource in Isolated Storage.
    http://msdn.microsoft.com/en-us/library/ff431811(v=VS.92).aspx

    - Mark
    • Marked as answer by Ren Xu Tuesday, August 21, 2012 9:17 PM
    Monday, February 27, 2012 6:59 PM
  • This is a terrible hack, but as a workaround you can insert empty Run elements with FontSize into your content. Insert them at regular intervals, closely spaced enough that at least one Run will occur in each text line displayed. It will effectively increase the line height to match the FontSize of the Run element. Works only for increasing the line height.

                    <RichTextBox TextWrapping="Wrap"
                        <Paragraph> 
                            <Run FontSize="40"></Run> Lorem ipsum dolor sit amet, consectetur 
                            <Run FontSize="40"></Run> elit, sed do eiusmod tempor incididunt ut la 
                            <Run FontSize="40"></Run>bore et dolore magna aliqua. Ut eni 
                            <Run FontSize="40"></Run>m ad minim veniam, quis nostrud exercita 
                            <Run FontSize="40"></Run>tion ullamco laboris nisi ut aliquip ex ea comm 
                            <Run FontSize="40"></Run>odo consequat. 
                            <Run FontSize="40"></Run> 
                        </Paragraph> 
                    </RichTextBox> 


    Richard Woo
    • Marked as answer by Ren Xu Tuesday, August 21, 2012 9:17 PM
    Monday, February 27, 2012 8:14 PM
  • Hi,
    A workaround is to use the WebBrowser control instead, and point it to a local HTML resource in Isolated Storage.
    http://msdn.microsoft.com/en-us/library/ff431811(v=VS.92).aspx

    - Mark

    Using WebBrowser control is something I haven't thought about. It means I have to rewrite a lot of code for things I already have in a RichTextBox, including font family, font size, colors, and text paging. On the other side, it may actually work with the benefit of line spacing. I will definitely try it and post my results later.

    Thanks Mark.
    Tuesday, February 28, 2012 1:43 AM
  • This is a terrible hack, but as a workaround you can insert empty Run elements with FontSize into your content. Insert them at regular intervals, closely spaced enough that at least one Run will occur in each text line displayed. It will effectively increase the line height to match the FontSize of the Run element. Works only for increasing the line height.

                    <RichTextBox TextWrapping="Wrap"
                        <Paragraph> 
                            <Run FontSize="40"></Run> Lorem ipsum dolor sit amet, consectetur 
                            <Run FontSize="40"></Run> elit, sed do eiusmod tempor incididunt ut la 
                            <Run FontSize="40"></Run>bore et dolore magna aliqua. Ut eni 
                            <Run FontSize="40"></Run>m ad minim veniam, quis nostrud exercita 
                            <Run FontSize="40"></Run>tion ullamco laboris nisi ut aliquip ex ea comm 
                            <Run FontSize="40"></Run>odo consequat. 
                            <Run FontSize="40"></Run> 
                        </Paragraph> 
                    </RichTextBox> 


    Richard Woo

    I thought about this approach, but it won't work in Asian languages that don't have spaces.
    Tuesday, February 28, 2012 1:46 AM
  • I thought about this approach, but it won't work in Asian languages that don't have spaces.
    Spaces don't matter. You can insert the Run element between any two characters, and it doesn't cause a space to be inserted. Try the xaml I posted. Some of the Run elements are in the middle of words.

    Actually it can be a little simpler than what I posted above. Instead of
    <Run FontSize="40"></Run>
    you can just use
    <Run FontSize="40"/>


    Richard Woo
    Tuesday, February 28, 2012 2:47 AM