Xamarin long text binding causes layout cropping

Question

I have a layout in a Xamarin Forms app. It consists of a ScrollView containing a StackLayout and various controls down the page. One of the controls near the top is a label with text bound to a string in the view model. Sometimes this is a very long string and in those cases the content gets cropped halfway down the page.

I've discovered that if I modify the layout while debugging the hot reload causes the view to display correctly.

I've also tried replacing the StackLayout with a grid with Auto sizing rows with the same result.

I have also found that if I set a HeightRequest on the label of something like 8000 and then set to -1 after the binding is updated it sometimes (not always) sizes correctly.

Does anyone have a suggestion on what I can try next?

Layout is essentially:

<ScrollView>
    <StackLayout Orientation="Vertical">
        <Label Text="Header" />
        <Label Text="{Binding PotentiallyLongText}" />
        <Label Text="Paragraph of text" />
        <Label Text="Another section of text" />
        <Label Text="Another section of text" />
        <Label Text="Another section of text" />
        <Label Text="Another section of text" />
    </StackLayout>
</ScrollView>

When the PotentiallyLongText is a very long paragraph with line breaks the content wil end abruptly (often cropped mid-line) further down the page. The ScrollView however does scroll to what would be the correct height.

Here's a screenshot of how it looks when I first load the page:

(The PotentiallyLongText label is the text with the white background)

And if I leave the app and come back or even hot reload via the debugger it looks like this (as it should)

What could cause the layout to cut off initially?

Hi, there is a LineBreakMode property of Lable, you could set LineBreakMode="WordWrap" to check whether it works for you. — Junior Jiang

Junior Jiang Junior Jiang · Accepted Answer · 2021-03-05T03:18:16

There is a LineBreakMode property of Lable, you could set LineBreakMode="WordWrap" to check.

Have a try with following code to check:

<ScrollView>
    <StackLayout Orientation="Vertical">
        <Label Text="Header" />
        <Label Text="{Binding PotentiallyLongText}" LineBreakMode="WordWrap"/>
        <Label Text="Paragraph of text" />
        <Label Text="Another section of text" />
        <Label Text="Another section of text" />
        <Label Text="Another section of text" />
        <Label Text="Another section of text" />
    </StackLayout>
</ScrollView>

Xamarin long text binding causes layout cropping

2 Answers