Xamarin Forms Image 控件分配比请求更多的高度答案

【问题标题】：Xamarin Forms Image control allocating more height than requestedXamarin Forms Image 控件分配比请求更多的高度
【发布时间】：2019-08-31 00:09:18
【问题描述】：

我正在为我的Image 元素设置一个显式的HeightRequest 或16；但是，在调试时，实际的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 是 512x512 PNG 图像。

Xamarin.Forms 版本：3.6.0.293080

P.S 我知道是 Image 元素通过使用 class CustomImage : Image 并覆盖和调试 OnMeasure 和 OnSizeAllocated 方法导致了问题。如果我弄错了，请纠正我。

【问题讨论】：

你能用“AspectFill”或“AspectFit”试试Aspect

标签： c# .net xaml xamarin xamarin.forms

【解决方案1】：

回答

HeightRequest 无法保证，它只是一个请求。如果 Xamarin.Forms 能够满足要求，它将实现它，但根据屏幕尺寸和布局，它可能无法满足要求。

解决方案

设置Grid.ColumnDefinition's Width and the 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>

【讨论】：

我知道这只是一个请求。就是想不通为什么不能满足。但是，该解决方案可以解决。谢谢。