I try to use a FontIcon to show an item through a customized Label.
As the icon is wider than it is tall, I would like to adjust the height and the vertical alignement.
However, I encounter a strange behavior on Android, whereas it works fine on iOS.
For example, with a default Label and a basic text the result is the same:
<Grid HeightRequest="80">
<Label Text="A" TextColor="Black"
FontSize="150"
BackgroundColor="Yellow"
VerticalOptions="Center" HorizontalOptions="Center"
VerticalTextAlignment="Center" />
</Label>
</Grid>
As I explained, it works fine on iOS,
But not on Android:
Would you have any explanation or any suggestion?
I've tested another approach by adding a negative margin on Android:
<Grid BackgroundColor="Olive"
HeightRequest="120">
<Label Text="A" TextColor="Black"
FontSize="180"
BackgroundColor="Yellow"
VerticalOptions="FillAndExpand" HorizontalOptions="Center"
VerticalTextAlignment="Start">
<Label.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="Android" Value="0, -70, 0, 0" />
</OnPlatform>
</Label.Margin>
</Label>
</Grid>
The results looks good, on iOS:
And it seems to be good on Android too:
But this works only for some devices, the rendering is not always the same when I test this on real devices or different emulators...
I'm not that it's the better approach, but I'm not sure that I can achieve this.