带有图像的 Xamarin.Forms 网格 - 间距不起作用

Question

我想用图像实现一个网格。在这种情况下，图像是数字，它看起来像电话拨号器：

我想实现这个（请不要注意红框..）：

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>

看起来RowSpacing 和ColumnSpacing 属性没有实现？ 我想在行之间增加一些间距（与列之间的间距相同）

Answer 1

好像没有实现 RowSpacing 和 ColumnSpacing 属性

其实已经实现了。我敢打赌这里发生的事情是对这个概念的误解。我已经获取了您的代码（经过一些简化）并打印了它提供的屏幕。这似乎与您想要实现的目标非常相似。

我的简化代码是这样的：

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

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

这是输出。左边ColumnSpacing=2和RowSpacing=3，右边：ColumnSpacing=20和Grid的Margin="30,0"：

请注意，我使用的图像几乎没有改变它们的配置。这是因为Aspect="AspectFit" 属性使图像采用最大尺寸保持其纵横比，当您将其更改为Fill 时不会发生这种情况。

除非它有效地改变将用于图像的空间量，否则它不会产生大的视觉改变，但它正在工作。

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

总结：间距有效。它是在 dpi 中设置的，因此它可以在每个设备上看起来不同，并且使用 AspectFit 时图像本身不会发生大的变化。