Элемент управления Xamarin Forms Image выделяет больше высоты, чем требуется

Question

Я устанавливаю явное HeightRequest из 16 для моего Image элемента; однако при отладке фактическое значение Height, по-видимому, возросло до 70. Вот мой Xaml:

<Grid Margin="1" Padding="0" ColumnSpacing="0" RowSpacing="0" HeightRequest="17">
    <BoxView CornerRadius="3" Color="LightGray"/>
    <BoxView Margin="1" CornerRadius="3" BackgroundColor="White"/>
    <StackLayout Margin="2,0,2,0" Orientation="Horizontal" HeightRequest="17" Spacing="0">
        <Image Source="hooray_icon"
               WidthRequest="16"
               HeightRequest="16"
               Margin="1,0,1,0"
               Aspect="Fill"/>
        <Label Text="{Binding HoorayCount}"
               Margin="1,0,1,0"
               VerticalOptions="Center"
               VerticalTextAlignment="Center"
               HorizontalOptions="Center"
               HorizontalTextAlignment="Center"
               HeightRequest="16"/>
    </StackLayout>
</Grid>

Ожидаемый дизайн:

Фактический дизайн:

hooray_icon - изображение PNG 512x512.

Xamarin.Forms version: 3.6.0.293080

P.S. Я знал, что именно элемент Image вызывал проблему, используя class CustomImage : Image и переопределяя и отлаживая методы OnMeasure и OnSizeAllocated. Поправь меня, если я ошибся.

Answer 1

Ответ

HeightRequest не гарантируется, это просто запрос. Если Xamarin.Forms сможет удовлетворить запрос, он выполнит его, но в зависимости от размера экрана и компоновки может не удовлетворить запрос.

Решение

Установите значение Grid.ColumnDefinition * s Width и Grid.RowDefinition 's Height.

код

<Grid Margin="1" Padding="0" ColumnSpacing="0" RowSpacing="0">
  <Grid.RowDefinitions>
    <RowDefinition Height="17" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="17" />
    <ColumnDefinition Width="17" />
    <ColumnDefinition Width="17" />
  </Grid.ColumnDefinitions>
    <BoxView CornerRadius="3" Color="LightGray" Grid.Row="0" Grid.Column="0"/>
    <BoxView Margin="1" CornerRadius="3" BackgroundColor="White" Grid.Row="0" Grid.Column="1"/>
    <StackLayout Margin="2,0,2,0" Orientation="Horizontal" Spacing="0" Grid.Row="0" Grid.Column="2">
        <Image Source="hooray_icon"
               Margin="1,0,1,0"
               Aspect="Fill"
               HeightRequest="16"/>
        <Label Text="{Binding HoorayCount}"
               Margin="1,0,1,0"
               VerticalOptions="Center"
               VerticalTextAlignment="Center"
               HorizontalOptions="Center"
               HorizontalTextAlignment="Center"
               HeightRequest="16"/>
    </StackLayout>
</Grid>