XAML布局如何调整Label大小适配换行文本以消除多余空白

问题根源 #

你当前布局出现多余空白的核心原因是Grid第二列设置了Width="*"，该配置会让列强制占满所有可用剩余水平空间，哪怕实际内容宽度不足，所以文本左侧会出现空白区域。此外外层冗余的StackLayout也增加了布局约束的复杂度。

解决方案 #

直接调整Grid的列宽规则，移除冗余外层布局，添加最大宽度限制避免文本超出屏幕即可，修改后的完整代码如下：

<Grid 
    HorizontalOptions="End" 
    VerticalOptions="End"
    MaxWidth="{Binding Width, Source={RelativeSource AncestorType={x:Type ContentPage}}, Converter={StaticResource MultiplierConverter}, ConverterParameter=0.9}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Label
        Grid.Column="0"
        BackgroundColor="Bisque"
        FontSize="Medium"
        Text="Version of Co.:"
        HorizontalOptions="End"
        Margin="0,0,4,0"/>

    <Label
        Grid.Column="1"
        BackgroundColor="BlanchedAlmond"
        HorizontalOptions="Fill"
        HorizontalTextAlignment="Start"
        LineBreakMode="WordWrap"
        FontSize="Medium"
        Text="This is vereverevery longversiontitle."/>
</Grid>

如果你不需要严格限制最大宽度比例，也可以直接把Grid的MaxWidth绑定到父容器的宽度即可，不需要转换器。如果是Xamarin.Forms环境下不支持相对绑定，也可以在后台代码中给Grid设置MaxWidth为屏幕宽度的90%，效果一致。
调整后可以满足：

• 短文本时自动适配宽度，整体右对齐，和原有正常效果一致
• 长文本时自动换行，值Label宽度自动匹配最长行文本宽度，无多余空白
• 整体固定在页面右下角，跨设备适配正常

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