Xaml Xamarin.使用图像形成网格-间距不'；行不通

我想用图像实现一个网格。在本例中，图像是数字，看起来像电话拨号器：

我想实现这一点（请不要注意红色框…）：

XAML代码如下所示：

<ContentPage.Content>
    <ScrollView>
        <StackLayout x:Name="MainStackLayout"
                     Spacing="15"
                     Padding="{Binding MainStackSidePadding}">
            <Grid x:Name="pinGrid" 
                  HorizontalOptions="CenterAndExpand" 
                  VerticalOptions="CenterAndExpand" 
                  ColumnSpacing="2" 
                  RowSpacing="3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image x:Name="pinPad1" Source="pinPad01.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="0" Grid.Column="0"/>

                <Image x:Name="pinPad2" Source="pinPad02.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="0" Grid.Column="1" Aspect="AspectFit"/>

                <Image x:Name="pinPad3" Source="pinPad03.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="0" Grid.Column="2" Aspect="AspectFit"/>

                <Image x:Name="pinPad4" Source="pinPad04.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="1" Grid.Column="0"/>

                <Image x:Name="pinPad5" Source="pinPad05.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="1" Grid.Column="1"/>

                <Image x:Name="pinPad6" Source="pinPad06.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="1" Grid.Column="2" Aspect="AspectFit"/>

                <Image x:Name="pinPad7" Source="pinPad07.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="2" Grid.Column="0"/>

                <Image x:Name="pinPad8" Source="pinPad08.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="2" Grid.Column="1"/>

                <Image x:Name="pinPad9" Source="pinPad09.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="2" Grid.Column="2"/>

                <Image x:Name="pinPad0" Source="pinPad00.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="3" Grid.Column="1"/>

                <Image x:Name="pinPadBcksp" Source="pinPadbackspace.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="3" Grid.Column="2"/>
            </Grid>
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

似乎未实现

行间距

和

列间距

属性？ 我想在行之间增加一些间距（与列之间的间距相同）

看起来没有实现行间距和列间距属性

实际上，它已经实现了。我打赌这里发生的是对这个概念的误解。我已经将您的代码（经过一些简化）打印出它提供的屏幕。这似乎与你想要实现的目标非常相似

我的简化代码如下：

<StackLayout x:Name="MainStackLayout"
             Spacing="15">
    <Grid x:Name="pinGrid" 
          HorizontalOptions="CenterAndExpand" 
          VerticalOptions="CenterAndExpand" 
          Margin="30,0"
          ColumnSpacing="20" 
          RowSpacing="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="Icon" Grid.Row="0" Grid.Column="0" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="0" Grid.Column="1" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="0" Grid.Column="2" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="1" Grid.Column="0" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="1" Grid.Column="1" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="1" Grid.Column="2" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="2" Grid.Column="0" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="2" Grid.Column="1" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="2" Grid.Column="2" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="3" Grid.Column="1" Aspect="AspectFill"/>
        <Image Source="Icon" Grid.Row="3" Grid.Column="2" Aspect="Fill"/>
    </Grid>
</StackLayout>

为了准确地显示我的意思，我更改了背景颜色并突出显示布局边界

这是输出。在左侧，

列间距=2

和

行间距=3

，右侧：

列间距=20

和

网格
Margin=“30,0”
：


请注意，我使用的图像几乎没有改变它们的配置。这是因为
Aspect=“AspectFit”
属性使图像保持最大大小，而将图像更改为
Fill
时不会发生这种情况

除非它能有效地改变用于图像的空间大小，否则它不会在视觉上做出大的改变，但它是有效的

使用
Android
设备或模拟器，您可以在
Developer Settings
上打开
Show Layout Bounds
。在设计这种视图时，我将使您的工作更加轻松

概括地说：间隔正在起作用。它是在dpi中设置的，因此它在每个设备上的外观可能不同，并且图像本身不会因为使用
AspectFit
而发生大的变化。行和列间距应该可以完成这项工作，但如果不行，您可以始终添加额外的列和行作为间距（只需要设置正确的高度和宽度）@Diegrafaelsouza此图像是一个真实的输出。请看我更新的问题和图片我想要什么。我是汉克斯人！AspectFit完成了这项工作，感谢您更好地理解：）