Xamarin中Grid内Button/Label高度异常问题咨询

你遇到的问题核心是Grid内的控件在测量阶段无法获取准确的列宽，导致长文本换行后的高度计算错误，同时Button默认不开启文本换行，进一步加剧了截断问题。以下是具体修复方案：

1. 修复Button的文本换行与高度计算 #

Button默认LineBreakMode为NoWrap，长文本会直接截断，需要开启自动换行；同时明确让Button填充列宽，确保测量时能基于实际可用宽度计算高度：

<Button Grid.Row="0" Grid.Column="1" 
        Text="Word1 Word2 ... Word20"
        LineBreakMode="WordWrap"
        HorizontalOptions="Fill" />

2. 确保Label的高度自适应 #

Label默认支持文本换行，但需要明确填充列宽，让其基于实际宽度计算换行后的高度：

<Label Grid.Row="1" Grid.Column="1" 
       BackgroundColor="Magenta"
       Text="Word1 Word2 ... Word20"
       LineBreakMode="WordWrap"
       HorizontalOptions="Fill" />

3. 明确Grid的行定义（可选但更规范） #

虽然Grid的RowDefinition默认是Height="Auto"（自动适配内容高度），但明确写出能让代码更清晰，避免歧义：

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>

完整修复后的XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App1.MainPage">

    <StackLayout>
        <Button Text="1 line" />
        <Button Text="Word1 Word2 Word3 Word4 Word5 Word6 Word7 Word8 Word9 Word10 Word11 Word12 Word13 Word14 Word15 Word16 Word17 Word18 Word19 Word20" />
        <Grid BackgroundColor="Cyan">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button Grid.Row="0" Grid.Column="0" Text="1 line" />
            <Button Grid.Row="0" Grid.Column="1" 
                    Text="Word1 Word2 Word3 Word4 Word5 Word6 Word7 Word8 Word9 Word10 Word11 Word12 Word13 Word14 Word15 Word16 Word17 Word18 Word19 Word20"
                    LineBreakMode="WordWrap"
                    HorizontalOptions="Fill" />

            <Label Grid.Row="1" Grid.Column="0" BackgroundColor="Green" Text="1 line" />
            <Label Grid.Row="1" Grid.Column="1" 
                   BackgroundColor="Magenta"
                   Text="Word1 Word2 Word3 Word4 Word5 Word6 Word7 Word8 Word9 Word10 Word11 Word12 Word13 Word14 Word15 Word16 Word17 Word18 Word19 Word20"
                   LineBreakMode="WordWrap"
                   HorizontalOptions="Fill" />
        </Grid>
    </StackLayout>

</ContentPage>

原理说明 #

• LineBreakMode="WordWrap"：强制控件将超出宽度的文本自动换行，避免截断
• HorizontalOptions="Fill"：让控件填充所在Grid列的全部宽度，确保测量阶段能基于实际可用宽度计算换行后的总高度
• RowDefinition Height="Auto"：让Grid行高完全适配内部控件的实际高度，不会限制控件的垂直空间

内容的提问来源于stack exchange，提问作者Vladimir