如何移动网格中图像的相对位置？

Question

我正在创建一个列出汽车及其价格、型号、速度等的汽车应用程序。我想将价格放在汽车图片上，如下所示：

为此，我创建了一个网格并允许图像填充整个内容，同时强制文本（周围有一个框架）进入较低的 column/row。但是，我最终在图表顶部看到了白色 space。看一看。我将网格设置为蓝色背景颜色以便于查看。

这里的问题是纵横比，因为填满整个网格的图像会切断边。 whitespace 的大小等于覆盖层，所以如果我将覆盖层再低一点，就会导致两边的白色space 变多。

注意：有些汽车有不同的宽高比，所以这必须是一个对其他图像也适用的修复。

注意 2： 这必须是相对位置固定，因为将图像的边距设置为 -100 等明显的方法在其他分辨率屏幕上不起作用，并且可能会让我被解雇。

问题：我怎样才能相对（例如让它在每个屏幕上工作）强制图像到页面顶部，同时仍然保持相同的宽高比并保持覆盖？

这是前端。

<StackLayout>
    
    <!-- Image and cost grid-->
    <Grid BackgroundColor="Blue">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="63*"/>
            <ColumnDefinition Width="35*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="75*"/>
            <RowDefinition Height="25*"/>
        </Grid.RowDefinitions>

        <Image Source="{Binding ImageLocation}" Grid.ColumnSpan="3" Grid.RowSpan="2"/>
        
        <Frame BackgroundColor="White" CornerRadius="5" Grid.Column="1" Grid.Row="1">
            <Label Text="{Binding Cost}" FontSize="Large" HorizontalTextAlignment="End" TextColor="Black"/>
        </Frame>
        
    </Grid>
    
    <!-- Information about the car -->
    <StackLayout Padding="15">
        <Label Text="{Binding Company}" FontSize="Large"/>
        <Label Text="{Binding Model}" FontSize="Medium" FontAttributes="Bold"/>
    </StackLayout>
    
</StackLayout>

Answer 1

移动框架而不是图像。

在一行中设置网格内容。
将帧 VerticalOptions 设置为 End
设置帧 HeightRequest 和 Margin（负值）。
将底部 StackLayout VerticalOptions 设置为 FillAndExpand

        <StackLayout>

            <!-- Image and cost grid-->
            <Grid BackgroundColor="Blue" ColumnDefinitions="63*, 35*, 2*">
                <Image Source="{Binding ImageLocation}" Grid.ColumnSpan="3"/>

                <!-- Shape the Frame here -->
                <Frame HeightRequest="40"  Margin="0,0,0,-20"  VerticalOptions="End" 

                       BackgroundColor="White" CornerRadius="5" Grid.Column="1" >
                    <Label Text="{Binding Cost}" FontSize="Large" HorizontalTextAlignment="End" TextColor="Black"/>
                </Frame>
            </Grid>

            <!-- Information about the car -->
            <StackLayout Padding="15" VerticalOptions="FillAndExpand">
                <Label Text="{Binding Company}" FontSize="Large"/>
                <Label Text="{Binding Model}" FontSize="Medium" FontAttributes="Bold"/>
            </StackLayout>

        </StackLayout>

如何移动网格中图像的相对位置？

How can I move the relative position of an image in a grid?

grid

xaml

overlay

image

xamarin.forms