网格中图像上方和下方的空白空间答案

【问题标题】：Empty space above and under images in grid网格中图像上方和下方的空白空间
【发布时间】：2017-12-14 01:58:54
【问题描述】：

我正在处理网格布局中的图像，但图像下方和上方的空白空间存在问题。我希望这些带有日期的行正好在图标下方，没有任何空白，并制作大小与图片相同的图标。当我使用方面适合时，它会使图标垂直拉伸。我试图设置固定大小的行，但当我旋转手机时它产生了一个废话。

 <Grid
                RowSpacing="0"
                VerticalOptions="Center"
               >
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />

                </Grid.ColumnDefinitions>
                <Image Source="kafelek_1.png" 
                       Grid.Column="0" Grid.Row="0"
                        ></Image>
                <Image Source="kafelek_2.png"
                       Grid.Column="1" Grid.Row="0"
                       ></Image>
                <Image Source="kafelek_3.png"
                       Grid.Column="2" Grid.Row="0" 
                       ></Image>
                <StackLayout BackgroundColor="#0078B7"
                             Grid.Column="0" Grid.Row="1"
                             Orientation="Horizontal"
                              HeightRequest="20"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="FillAndExpand">
                    <Image Source="trojkat.png">
                    </Image>
                    <Label Text="Temp"
                           x:Name="DecisionDateLabel"></Label>

                </StackLayout>
                <StackLayout BackgroundColor="#0078B7"
                             Grid.Column="1" Grid.Row="1"
                             Orientation="Horizontal"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="FillAndExpand">
                    <Image Source="trojkat.png"></Image>
                    <Label Text="Temp"
                           x:Name="KnowledgeDateLabel"></Label>

                </StackLayout>
                <StackLayout BackgroundColor="#0078B7"
                             Grid.Column="2" Grid.Row="1"
                             Orientation="Horizontal"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="FillAndExpand">
                    <Image Source="trojkat.png"></Image>
                    <Label Text="Temp"
                           x:Name="PollsDateLabel"></Label>

                </StackLayout>
            </Grid>

一般来说，这是我想要获得的：

【问题讨论】：

这是因为您的图像纵横比被保留了。您正在设置第二行的高度，但您的第一行会根据宽度的大小进行缩放，因此不会发生两行之间的垂直对齐。如果你告诉我你的 2 张图片的尺寸是多少，我可以看看还有什么可以做的。是否可以根据需要调整图像大小？
您也可以为第一行指定高度，然后使用 2 行高度来找到您需要的比率。另一种选择是不使用网格，而是使用所有堆栈布局或相对布局
如果您在第一行为您的图片设置了“HeightRequest”，您将删除多余的空间。

标签： xaml layout xamarin.forms