Wrapping text inside a StackPanel with Horizontal orientation

How-to Discussions
1

Hi,

In this sample App, the long text is wrapped when it’s in a StackPanel with Vertical orientation. But when I change the StackPanel orientation to Horizontal the text is not wrapped anymore.

<App>
  <Text ux:Class="Medium" FontSize="20" TextWrapping="Wrap" TextColor="Blue" />

  <StackPanel>
    <StackPanel Background="#C7C7CC">
        <Medium>This is just some medium text, but it will happily wrap when the edges of the screen is reached.</Medium>
    </StackPanel>

    <StackPanel Orientation="Horizontal" Margin="0,40,0,0" Background="#C7C7CC">
        <Medium>This is just some medium text, but it will happily wrap when the edges of the screen is reached.</Medium>
    </StackPanel>
    </StackPanel>
</App>

As Bolav suggested I’ve set <Medium Width="300"> and it worked. But still wanted to know whether this behaviour of StackPanel is normal or not.

Thanks in advance,

Ipek

2

Hi!

This behavior is expected.

The reason is that when the StackPanel orientation is set to horizontal, is doesn’t know how wide you want your Text controls to be (since it theoretically could be infinite). When your StackPanel had a vertical orientation, the width was constrained by the screen width. This is not the case when you switch to horizontal orientation.

3

Yes, this is the expected behaviour. A StackPanel provides infinite space in one direction, either vertically or horizontally. IN the vertical case you have a fixed width and infinite height, thus the text can be wrapped to the fixed width. In the horizontal case you have an infinite widht and fixed height. This doesn’t provide any width on which the text can wrap – it happily assumes it should write on one line since there’s no limit to that length.

4

Thanks to both of you for the clear explanation.

5

Can you please explain why

    <StackPanel MaxWidth="100%" Orientation="Horizontal" Margin="0,40,0,0" Background="#C7C7CC">
        <Medium>This is just some medium text, but it will happily wrap when the edges of the screen is reached.</Medium>
    </StackPanel>

renderes the background as if it is wrapping, but does not wrap the text.

6

The MaxWidth="100%" makes the panel the width of the parent, and the background will fill only that area then. The Text is still free to overflow the container, since it’s width still isn’t constrained as it is a horizontal stack panel. It’s a bit of an odd scneario to have maximum width on a horizontal stack panel.

7

Is there any method to display long text when the outer Stackpanel is horizontal?

8

@Sajith: the above explanations fully cover the question you just asked.

9

Yes, I got it, but I want to figure out Is it possible to fit long texts to narrow screens without giving “MaxWidth” or setting orientation to “Vertical”.

10

I’m not sure I can give you another answer aside what has already been said: for text to be wrapped, it has to be constrained by something. A horizontal StackPanel does not deliver those constraints since it’s infinite in the horizontal direction.

11

OK . Thank you