Label doesn't render correctly

[ShariatPanah]

Description

the label control doesn't render the text correctly, in this case I'm using vertical and horizontal stacklayouts but due to #10494 it seems that it has issues in Grid Layout too, so the Label control is a complete messed up in Maui, because it worked perfectly fine in Xamarin.Forms without specifying any LineBreakMode or LineHeight and MaxLine properties.

so the problem is when the text of a label is too long, the text goes outside of it's parent (Layout) and also outside of the screen and doesn't respect setting of any LineBreakMode or LineHeight and MaxLine properties. no matter what, it wont render the text as a multiline label it shows just a single line label, let me show some code and screenshot:

Case #1:

<VerticalStackLayout Margin="10" BackgroundColor="Orange">
    <Label Text="Case #1:" />

    <HorizontalStackLayout Spacing="10">
        <Label Text="TTT" />

        <Label
            BackgroundColor="Cyan"
            HorizontalOptions="FillAndExpand"
            LineBreakMode="WordWrap"
            LineHeight="1"
            MaxLines="3"
            Text="x{Binding Notes}xxxxxxxx OO xxxxxxxxxxxHHHHH xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxx 333333333333333333333" />
    </HorizontalStackLayout>
</VerticalStackLayout>

which results as the below picture:

but interestingly when you set the WidthRequest of Label, it seems that it works but it's not practical because when you use a horizontal stacklayout you just dont want to set the children's Width manually, you just want the children to fill their container.

so for Case #2:

<VerticalStackLayout Margin="10" BackgroundColor="Orange">
    <Label Text="Case #2: With Setting WidthRequest" />

    <HorizontalStackLayout Spacing="10">
        <Label Text="TTT" />

        <Label
            BackgroundColor="Cyan"
            HorizontalOptions="FillAndExpand"
            LineBreakMode="WordWrap"
            LineHeight="1"
            MaxLines="3"
            Text="x{Binding Notes}xxxxxxxx OO xxxxxxxxxxxHHHHH xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxx 333333333333333333333"
            WidthRequest="300" />
    </HorizontalStackLayout>
</VerticalStackLayout>

result:

Steps to Reproduce

I modified the sample project of #10494 and added these two Cases, and i attach the sample project, please just run the project and see the results
LabelBug.zip

Link to public reproduction project repository

No response

Version with bug

7.0.96

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 8.0 and 12.0

Did you find any workaround?

No response

Relevant log output

No response

[PureWeen]

@ShariatPanah if you use a grid instead of the HorizontalStackLayout does that fix your issue?

Or, if you change HorizontalSTackLayout to a StackLayout with horizontal orientation does that change anything?

I'm thinking the HorizontalStackLayout is going to just size infinitely and will just get clipped by the VSL instead of constrained.

@hartez thoughts?

[ShariatPanah]

@PureWeen by using the Legacy StackLayout it seems that it works fine and has no problems, interesting :)

<StackLayout
    Margin="10"
    BackgroundColor="Orange"
    Orientation="Vertical">
    <Label Text="Case #3: StackLayout, Without LineHeight, BreakMode and MaxLine" />

    <StackLayout Orientation="Horizontal" Spacing="10">
        <Label Text="TTT" />

        <Label
            BackgroundColor="Cyan"
            HorizontalOptions="FillAndExpand"
            Text="x{Binding Notes}aaaaaaaaa OO bbbbbbbbbbbbbbbHHHHH ccccccccccccc ddddddddddddd eeeeeee xxxxxxxxxxx yyyyyyyyyyyy 11111111111111 222222 333333333333333333333" />
    </StackLayout>
</StackLayout>

result:

but when you put this Legacy Stacklayout inside of a grid and put the grid inside of a frame, the problem kicks again.

Case #4

<Frame
    Margin="10"
    Padding="0"
    BackgroundColor="Purple"
    CornerRadius="0">
    <Grid>
        <BoxView
            Margin="-25,-30,0,0"
            CornerRadius="100"
            HeightRequest="85"
            HorizontalOptions="End"
            VerticalOptions="Start"
            WidthRequest="85"
            Color="Red" />

        <StackLayout
            Margin="10"
            BackgroundColor="Orange"
            Orientation="Vertical">
            <Label Text="Case #4: StackLayout Inside a Grid thats Inside of a Frame, Without WidthRequest, LineHeight, BreakMode and MaxLine" />

            <StackLayout Orientation="Horizontal" Spacing="10">

                <Label Text="TTT" />

                <Label
                    BackgroundColor="Cyan"
                    Text="x{Binding Notes}aaaaaaaaa OO bbbbbbbbbbbbbbbHHHHH ccccccccccccc ddddddddddddd eeeeeee xxxxxxxxxxx yyyyyyyyyyyy 11111111111111 222222 333333333333333333333"
                    TextColor="Black" />
            </StackLayout>
        </StackLayout>
    </Grid>
</Frame>

Result:

Case #5: StackLayout Inside a Grid thats Inside of a Frame, All Necessary Properties are set

<Frame
    Margin="10"
    Padding="0"
    BackgroundColor="Purple"
    CornerRadius="0">
    <Grid>
        <BoxView
            Margin="-25,-30,0,0"
            CornerRadius="100"
            HeightRequest="85"
            HorizontalOptions="End"
            VerticalOptions="Start"
            WidthRequest="85"
            Color="Red" />

        <StackLayout
            Margin="10"
            BackgroundColor="Orange"
            Orientation="Vertical">
            <Label Text="Case #5: StackLayout Inside a Grid thats Inside of a Frame, All Necessary Properties are set" />

            <StackLayout Orientation="Horizontal" Spacing="10">

                <Label Text="TTT" />

                <Label
                    BackgroundColor="Cyan"
                    LineBreakMode="WordWrap"
                    LineHeight="1"
                    MaxLines="3"
                    Text="x{Binding Notes}aaaaaaaaa OO bbbbbbbbbbbbbbbHHHHH ccccccccccccc ddddddddddddd eeeeeee xxxxxxxxxxx yyyyyyyyyyyy 11111111111111 222222 333333333333333333333"
                    TextColor="Black"
                    WidthRequest="300" />
            </StackLayout>
        </StackLayout>
    </Grid>
</Frame>

Result:

[mattleibow]

Late comment that did not send hours ago...

I tested this in WPF - which we tried to closely match, and the same thing happens (the difference is that maui has clipping off by default)

I tested with the older/compat/forms StackLayout and it seems to work as you are expecting:

Not sure if any of these help?

But, to reduce nesting, you can also use a Grid:

[ShariatPanah]

@mattleibow Thanks for your tips, but as I mentioned in my last comment, when you use nested layouts, the problem comes back again. i showed the xaml codes i used, you can test them but i can provide another repro project with new cases if you want. just let me know

[hartez]

@mattleibow Thanks for your tips, but as I mentioned in my last comment, when you use nested layouts, the problem comes back again. i showed the xaml codes i used, you can test them but i can provide another repro project with new cases if you want. just let me know

Yes, please provide the examples.

[hartez]

@ShariatPanah Yes, case #3 above works because StackLayout honors the "AndExpand" options from Xamarin.Forms. HorizontalStackLayout and VerticalStackLayout do not.

In case #4, you forgot the HorizontalOptions="FillAndExpand" on your Label, that's why it's not working as you expect. You've also left that off of case #5, and you've added a WidthRequest, which is why it does not go all the way to the edge.

[Wigmund]

I have the same problem with wrapping text in labels, but the label height seems to be right but the text not wrapped...

<Grid>
        <Frame HorizontalOptions="Center" Margin="40" BackgroundColor="{AppThemeBinding Light={StaticResource Gray150}, Dark={StaticResource Gray950}}">
            <StackLayout Orientation="Vertical">
                <Label Text="{Binding Name}" Style="{StaticResource PropertyLabel}" Margin="0,0,0,5" TextColor="{StaticResource Primary}" FontSize="18" />

                <Label FormattedText="{Binding Description, Converter={StaticResource StringToFormattedStringConverter}}" LineBreakMode="WordWrap" Margin="0,0,0,10" HorizontalOptions="FillAndExpand" />

                <Button Text="OK" HorizontalOptions="End" Clicked="Button_Clicked" />
            </StackLayout>
        </Frame>
</Grid>

[dustin-wojciechowski]

@Wigmund I tested your example against what we currently have in main and looks like this was fixed.

[RoiChen001]

Can repro this issue at Android platform on the latest 17.10.0 Preview 3(8.0.7).