Search code examples
xamluwpuwp-xamlricheditbox

RichEditBox text wrapping UWP


I am trying to get a RichEditBox to take over the entire width of the app window and to be responsive to window resizing, so far the code I have is the following:

<RichEditBox HorizontalAlignment="Stretch"
             TextWrapping="WrapWholeWords"
             Height="250"
             Name="Intro"/>

What I am getting from the code above is this: enter image description here

Any ideas on how can I get this to work? Why is it that I tell the text to wrap and it doesn't follow?

UPDATE

I also tried this:

<RichEditBox HorizontalAlignment="Stretch"
                         Height="250"
                         Name="Intro"/>

But the result is:

enter image description here

The problem that I am having is that it seems that HorizontalAlignment="Stretch" does not really do anything. The only way I am able to set a decent width is by hard-coding it, for example: Width="600". But if I do this my UI will not respond correctly to resizing. I also tried HorizontalContentAlingment="Stretch" but the result is exactly the same.

How can I get my RichEditBox take up all the available Width and Wrap at the same time?


Solution

  • If you look at the documentation of RichEditBox.TextWrapping, you'll notice that WrapWholeWords is invalid. You have to use

    <RichEditBox TextWrapping="Wrap"/>
    -or-
    <RichEditBox TextWrapping="NoWrap"/>
    

    Since Wrap is the default value, you can drop the property.

    <RichEditBox HorizontalAlignment="Stretch"
                 Height="250"
                 Name="Intro"/>
    

    Edit: in reply to the updated question:

    A control only takes the width of it's parent control. Some container controls (e.g. Grid) automatically take the full width available, while others (e.g. StackPanel) only take the required size of it's children. Using HorizontalAlignment="Stretch" in combination with a StackPanel as a parent control, will only use the MinWidth property instead of the full available width on your screen. Sometimes you can't directly see this issue, e.g. when your control is inside an itemtemplate of a ListView. Use the Live Visual Tree in Visual Studio to find the parent containers and locate the issue.

    So in short: make sure your RichEditBox is inside a Grid (or similar control) instead of a StackPanel.