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

Posted 2023-03-25

【中文标题】如何在网格中移动图像的相对位置？

【英文标题】：How can I move the relative position of an image in a grid?

【发布时间】：2021-07-25 09:56:27

【问题描述】：

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

为此，我创建了一个网格并允许图像填充整个事物，同时将文本（周围有一个框架）强制到较低的列/行中。但是，我最终在图表顶部出现了空白。看一看。为了便于查看，我将网格设置为蓝色背景色。

这里的问题是纵横比，因为 确实 填满整个网格的图像会切断边。空白的大小相当于覆盖层，所以如果我将覆盖层放低一点，就会导致两边都有更多的空白。

注意：有些汽车有不同的纵横比，所以这必须是一个适用于其他图像的修复程序。

注意 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>

【问题讨论】：

这些汽车图像是否有不同的尺寸（或者 Grid 的第一行应该是固定高度）？而且您还希望价格框架相应地调整高度？

【参考方案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>