Xamarin - прокручиваемый список миниатюр

Question

Я собираюсь просмотреть все статьи и коды, которые я нашел здесь, но большинство из них устарели или используют внешние инструменты.

Мне нужно создать миниатюрную галерею, с двумя столбцами и прокручиваемый. Мой подход - использовать представление коллекции или представление списка с сеткой в ​​каждом элементе.

Но не уверен, что это правильный подход. Каким будет текущее хорошее решение для создания миниатюрной галереи с прокруткой в ​​2 столбца с текущими инструментами, доступными в xamarin?

Answer 1

Вы можете использовать только CollectionView для его реализации.

Существует свойство макета CollectionView: Span

• Span, типа int, который представляет количество столбцов или строк для отображения в сетке. Значение этого свойства по умолчанию равно 1, и его значение всегда должно быть больше или равно 1.

Вы можете следовать приведенному ниже коду:

Вертикальный список : CollectionView может отображать свои элементы в вертикальной сетке, задав свойству ItemsLayout объект GridItemsLayout, для свойства Orientation которого установлено значение Vertical:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="80" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <!--<Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />-->
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Модель, связанная в ContentPage :

public partial class VerticalGridPage : ContentPage
{
    public VerticalGridPage()
    {
        InitializeComponent();
        BindingContext = new MonkeysViewModel();
    }
}

О MonkeysViewModel.cs вы можете посмотреть на официальный образец ссылку.

Эффект: