Сетка 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, вы можете включить Show Layout Bounds на Developer Settings.Это сделает вашу работу намного проще при разработке такого рода представлений.

Суммарно: Интервал работает.Он установлен в dpi, поэтому он может выглядеть по-разному на каждом устройстве, и само изображение не претерпит больших изменений при использовании AspectFit.