In Xamarin Forms, when I put a label inside a grid with many columns, the label takes extra height just as if the text is longer and overflows below on a new line. If I put the label inside the stack layout, before or after the grid, it displays correctly, but it doesn't when inside the grid. Also, the issue seems bigger if the grid has many columns. If I delete the scroll view it doesn't fix the issue. The issue seems to be related with the Margin of 20 set for the stack layout. Bigger margin makes things worse, however, even if I delete the scroll view and stack layout and I keep just the grid, the issue still appears... I am using latest Xamarin Forms (5.0.0.2291) and Xamarin Essentials (1.7.0). I tried older versions, e.g. XF 4.7.1239 - issue still appears...

https://www.youtube.com/watch?v=p30FPDP7GBs

Any advice greatly appreciated.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="App1.MainPage"
             NavigationPage.HasNavigationBar="False"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             ios:Page.UseSafeArea="true">
    <ContentPage.Content> <!-- totally not good... -->
        <ScrollView Orientation="Vertical">
            <StackLayout  Orientation="Vertical"
                          Margin="20"
                          HorizontalOptions="FillAndExpand"
                          BackgroundColor="LightGreen">
                <Grid Margin="0" Padding="0" BackgroundColor="LightCyan">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Label Text="Contact wire height low and high alert limits
                           contact wire 123456"
                           FontSize="18"
                           Padding="0"
                           Margin="0"
                           HorizontalOptions="FillAndExpand"
                           Grid.Row="0"
                           Grid.Column="0"
                           Grid.ColumnSpan="8"
                           BackgroundColor="LightBlue"/>
                </Grid>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

CodePudding user response：

That sounds like a bug in Grid's layout logic, related to the label spanning multiple columns.

You might be able to control it, by explicitly telling it to only use a single line:

<Label ... MaxLines="1" ... />

OR you may have to set an explicit row height. E.g.

<RowDefinition Height="30"/>

CodePudding user response：

1. According to your description, Lable takes up extra height. In your definition, you use <RowDefinition Height="Auto"/>, so the view will expand downwards automatically. Defining a fixed height can make him in height. show normaly.
2. You have used Grid.ColumnSpan="8", using this code is to combine the space of 8 columns into one, that is to use the space of a whole row, you can see that this Lable occupies a whole row on the display.
3. For your column definitions, you used eight 1*, which is equivalent to dividing a row into 8 parts, each taking 1/8 of the space.