Label will not expand vertically with multi line text inside a auto row of a grid in net maui

Question

I am trying to setup a grid with a label, but I cannot find a way to have the label grow horizontally to show all the text if it is multi line. I tried rowdefinition of auto and it just shows one line of text, tried all of the line wrap modes and vertical options.

I did a google search on xamarin forms (and maui) and found several references to this since 2017 and having bug reports on it but it appears it was never fixed?

<Grid RowSpacing="0" ColumnSpacing="0" Padding="0" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" BackgroundColor="AliceBlue" HorizontalOptions="FillAndExpand">
                    <Grid.ColumnDefinitions>                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <Label Grid.Column="0" Grid.Row="0" Text="This line  is multi line and should expand this label to show the mutiple lines but is is not working and I can't find an option that will work" Padding="5" VerticalOptions="FillAndExpand" LineBreakMode="CharacterWrap" />         
            </Grid>

Answer 1

Hello,

The reason for this problem is that in a grid layout, the length of the label extends beyond the screen because there is no width limit.

Therefore, you only need to give the Label a length limit, such as <Label WidthRequest="400" .../>, and you will find that the line break is working.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our [documentation][1] to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

I had the same issue, but after break my mind for a while, I found an easy workaround.

Basically, the problem is with grid layout, which doesn't recognize last child element width limit, so the solution is add another child (invisible) to "move" the problem on it...

<Grid ColumnDefinitions="auto, *" >
            <Image Grid.Column="0" />
            <VerticalStackLayout Grid.Column="1"
                                 HorizontalOptions="Start"
                                 VerticalOptions="Center" 
                                 Margin="8" >
                <Label Style="{StaticResource MediumBoldLabel}"
                       Text="{Binding Description}" />
				<!-- text wrapped label --/>
                <Label Style="{StaticResource InfoLabel}"
                       Text="{Binding Info}" />
            </VerticalStackLayout>
        </Grid>

But adding an invisible stack layout, the problem is gone...

<Grid ColumnDefinitions="auto, *" >
            <Image Grid.Column="0" />

            <VerticalStackLayout Grid.Column="1"
                                 HorizontalOptions="Start"
                                 VerticalOptions="Center" 
                                 Margin="8" >
                <Label Style="{StaticResource MediumBoldLabel}"
                       Text="{Binding Description}" />

				<!-- text wrapped label --/>
                <Label Style="{StaticResource InfoLabel}"
                       Text="{Binding Info}" x:Name="info" />

                <StackLayout BackgroundColor="Transparent" 
                             Margin="0" 
                             HeightRequest="10" 
                             IsVisible="{Binding Source={x:Reference 		    			info}, Path=IsVisible}"/>
            </VerticalStackLayout>
        </Grid>

Hope my solution could help anyone!