Label doesn't render correctly when in a Grid with column definitions

Description

1. Label that is set with the end trailing doesn’t display the trailing dots (…)
2. Label that is set with MaxLines=“3” doesn’t always display the 2nd and 3rd lines when in a grid (there is a situation when the 3 lines are rendered but the grid size expands only to the first line and the 2nd and 3rd lines are visible outside of the grid).

Steps to Reproduce

This example would display only two lines. One from row 1 and another from row 2. What is expected is to see more than one lines in the 2nd row. (Look for a picture in the comments bellow.)

                    <Grid 
                        RowDefinitions="auto,auto"
                        ColumnDefinitions="auto,*,auto"
                        BackgroundColor="LightBlue"
                        VerticalOptions="Start"
                        >

                        <!-- first line -->
                        <Label
                            Margin="0,16,0,0"
                            VerticalOptions="Start"
                            HorizontalOptions="Start"
                            Grid.Row="0"
                            LineBreakMode="TailTruncation"
                            Text="s{Binding CustomerName} HHHHHHHHH HHHHHHHHH HHHHHHHHHHH HHHHHHHHHHH"
                            FontSize="16"
                            />

                        <!-- second line -->
                        <Label
                            Grid.Row="1"
                            Margin="0,0,16,16"
                            VerticalOptions="Start"
                            HorizontalOptions="Start"
                            LineBreakMode="WordWrap"
                            Text="x{Binding Notes}xxxxxxxx OO xxxxxxxxxxxHHHHH xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxx 333333333333333333333"
                            MaxLines="3"
                            LineHeight="1"
                            FontSize="12"
                            BackgroundColor="Yellow"
                            />


                    </Grid>

Link to public reproduction project repository

none, example provided in the description

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15.4

Did you find any workaround?

if the columns definitions are removed it would render correctly. In real scenario the columns are needed and can’t be removed.

Relevant log output

No response

[hartez]

The fact that the text does not wrap in the second Label is not a bug, it’s as designed. The Label is in column with a Width of Auto; this means that each item in the column is measured as if it had infinite width available. Given infinite width, the Label has no reason to wrap its text, and simply lays it out in a single line that runs off the edge of the Grid. The other two columns are empty, so they have no effect on the layout at all.

If you want the Label to wrap at the edge of the Grid, you should set the ColumnDefinitions to *.

For the Label with LineBreakMode set to TailTruncation, it looks like we do have a bug; even with the columns set to *, it won’t truncate properly. It looks like the issue is related to having HorizontalOptions="Start". As a workaround until we can fix it, you can set the HorizontalOptions for that Label to Fill and the text will truncate as expected.

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 1.0. Repro on Windows 11, Android 13.0-API33 and iOS 16.4 with provided project: 10494.zip