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＆＃39; s Margin="30,0"：

请注意，我使用的图像几乎没有改变它们的处置方式。它＆＃39;由于Aspect="AspectFit"属性，使图片占据最大尺寸保持其方面，当您将其更改为Fill时，不会发生什么。

除非它有效地改变了用于图像的空间量，否则它不会产生很大的视觉变化，但它会起作用。

使用Android设备或模拟器，您可以在Show Layout Bounds上启用Developer Settings。在设计这种观点时，我会让你的工作变得更轻松。

总结：间距正常。它以dpi设置，因此它可以在每个设备上看起来不同，并且图像本身不会使用AspectFit进行大的更改。

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

1 个答案: