Прокручиваемая сетка в Xamarin

Question

Я должен реализовать прокручиваемую сетку изображений в Xamarin Forms, сетка n x 2, так что два изображения рядом.Поскольку я понятия не имею, как объединить ScrollView с Grid, я попробовал это (все мои элементы управления находятся внутри сетки, но это не имеет значения):

<ScrollView x:Name="scroller"
            Orientation="Vertical"
            BackgroundColor="Fuchsia"
            Grid.Row="0" Grid.Column="1"
            Grid.RowSpan="10" Grid.ColumnSpan="5">
    <StackLayout x:Name="stacker">
        <StackLayout HorizontalOptions="Fill" Orientation="Horizontal">
            <Image Source="test.png" HorizontalOptions="Start"/>
            <Image Source="test.png" HorizontalOptions="End"/>
        </StackLayout>
        <!-- put several of these here -->
    </StackLayout>
</ScrollView>

Но результатыдалеко не приемлемо:

Я пробовал несколько вариантов, но кажется, что StackLayout не будет подчиняться границам своего родителя.

Просто для удовольствия я попробовал Grid без какого-либо успеха, поскольку он добавляет много места между сетками (и я не знаю почему):

<ScrollView x:Name="scroller"
            Orientation="Vertical"
            BackgroundColor="Fuchsia"
            Grid.Row="0" Grid.Column="1"
            Grid.RowSpan="10" Grid.ColumnSpan="5">
    <StackLayout x:Name="stacker">                    
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Source="test.png" Grid.Row="0" Grid.Column="0"/>
            <Image Source="test.png" Grid.Row="0" Grid.Column="1"/>
        </Grid>
        <!-- put several of these here --> 
    </StackLayout>
</ScrollView>

Как создать простую прокручиваемую сетку в формах Xamarin?Это моя рисованная цель:

Любые советы приветствуются!

Answer 1

Вы должны использовать ListView для этой задачи.В противном случае есть много вещей, которые вы должны иметь дело самостоятельно.Вот ссылка, где, я надеюсь, вы найдете именно тот макет, который вам нужен: https://github.com/02047788a/TwoColumnListView

Answer 2

Интервал между элементами соответствует StackLayout Spacing, который определяет, как будет добавляться каждый добавленный элемент.

Еще одна вещь, которую вы должны принять во внимание, это VerticalOptions, который будет определять положениеэлементы, см. пример ниже:

<ScrollView x:Name="scroller"
            Orientation="Vertical"
            BackgroundColor="Fuchsia"
            Grid.Row="0" Grid.Column="1"
            Grid.RowSpan="10" Grid.ColumnSpan="5">
    <StackLayout x:Name="stacker" VerticalOptions="Start" Padding="0" Spacing="0">                    
        <Grid VerticalOptions="StartAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Source="test.png" Grid.Row="0" Grid.Column="0"/>
            <Image Source="test.png" Grid.Row="0" Grid.Column="1"/>
        </Grid>
        <!-- put several of these here --> 
    </StackLayout>
</ScrollView>