Xamarin：Horizontal StackLayout内Label垂直对齐问题

这个情况我太熟悉了——默认情况下，不同字号的Label即使设置了VerticalOptions="End"，也会因为文字在控件内部的垂直对齐方式不对，导致基线错位。给你两个简单有效的解决方案：

方案1：修改Label的文字垂直对齐（最小改动） #

你原来的代码只设置了控件在布局里的垂直位置，却没指定文字在Label内部的对齐方式。只需要给两个Label加上VerticalTextAlignment="End"，让文字贴紧Label的底部边界，就能让基线对齐了：

<StackLayout Orientation="Horizontal" Spacing="1">
    <Label Text="{Binding First}" FontSize="{Binding FirstFontSize}" 
           LineBreakMode="NoWrap" VerticalOptions="End" VerticalTextAlignment="End"/>
    <Label Text="{Binding Second}" FontSize="{Binding SecondFontSize}" 
           LineBreakMode="NoWrap" VerticalOptions="End" VerticalTextAlignment="End"/>
</StackLayout>

方案2：改用Grid布局（更可靠的对齐） #

如果StackLayout的表现还是不尽如人意，改用Grid布局是更稳妥的选择。把两个Label放在Grid的同一行，确保它们共享完全一致的底部边界，再配合文字垂直对齐：

<Grid ColumnDefinitions="Auto,Auto" ColumnSpacing="1">
    <Label Grid.Column="0" Text="{Binding First}" FontSize="{Binding FirstFontSize}" 
           LineBreakMode="NoWrap" VerticalOptions="End" VerticalTextAlignment="End"/>
    <Label Grid.Column="1" Text="{Binding Second}" FontSize="{Binding SecondFontSize}" 
           LineBreakMode="NoWrap" VerticalOptions="End" VerticalTextAlignment="End"/>
</Grid>

为什么原来的代码会错位？ #

简单说，VerticalOptions="End"只是让Label控件本身在StackLayout里靠下，但Label内部的文字默认是垂直居中的。字号小的Label控件高度更小，文字居中后就会比大字号的文字高出一截，看起来就和底部有间距了。加上VerticalTextAlignment="End"就能让文字直接贴紧控件底部，自然就和大字号的基线对齐啦。

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