TextWrapping Broken?

Bug Reports
1

Having the following app:

<App Theme="Basic" Background="#DDD">
    <ScrollView>
        <StackPanel>
            <StackPanel Orientation="Horizontal" Background="#fff" Margin="0,5">
                <DropShadow Distance="4" />
                <Image Alignment="TopLeft" Margin="5" File="Assets/background1.png" Height="80" Width="100" StretchMode="Fill" />
                <StackPanel>
                    <Text FontSize="15" TextColor="#333" Value="Edwin Reynoso" />
                    <Text FontSize="15" TextColor="#aaa" Value="10:00AM" />
                    <Text TextWrapping="Wrap" Value="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, numquam nulla eveniet quia perspiciatis ab autem temporibus harum voluptatibus nostrum, maiores reiciendis! Sunt adipisci vel, architecto, similique minus totam! Pariatur?" />
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </ScrollView>
</App>

The lorem ipsum does not wrap in preview mode, and in build on Galaxy S4 Android 5.0.0 it shows a black box instead of the lorem ipsum

2

Remove Orientation="Horizontal" it should wrap then.

3

@skezo but if I do that it looks like this:

file
cDNwwCH8SSdF-legacy-files-V2yCVfr5Qmn0haBb-6zKWBqFONWyoYitIHstODHYm.png377×690

I need it to look like this (but wrapping):

file
yaAquIUKjrI9-legacy-files-ykFfuxBZMjzqNSAS-TgjWqCDKugrRhGUn1DGRMJzF.png367×690

4

Edwin: In order for word wrapping to make sense, you have to specify a MaxWidth for your text, otherwise it doesn’t know where to wrap.

The fact that you are getting a black box on Android sounds like a bug though.

5

A StackPanel essentially creates an area with an infinite amount of space along its orietnation axix; a horizontal stack layout will have unlimited width thus not need to wrap the text.

The layout you want can instead be achieved with a DockPanel:

<App Theme="Basic">
    <ScrollView>
        <StackPanel>
            <DockPanel>
                <Image Dock="Left" File="Assets/background1.png" Width="100"
                    StretchMode="UniformToFill"/>
                <StackPanel>
                    <Text FontSize="15" TextColor="#333" Value="Edwin Reynoso" />
                    <Text FontSize="15" TextColor="#aaa" Value="10:00AM" />
                    <Text TextWrapping="Wrap" Value="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, numquam nulla eveniet quia perspiciatis ab autem temporibus harum voluptatibus nostrum, maiores reiciendis! Sunt adipisci vel, architecto, similique minus totam! Pariatur?" />
                </StackPanel>
            </DockPanel>
        </StackPanel>
    </ScrollView>
</App>

The DockPanel lets you place things at the various edges of a region but still use the natural sizing of the content and limit it to the maximums of the parent container.

6

Perfect thanks! @edA-qa mort-ora-y