Xamarin - scrollable minature list

Question

I've been going trhough all the articles and codes i found here, but most of them seem to be outdated, or make use of external tools.

I'd need to create a miniature gallery, with two columns, and scrollable. my aproach would be to use a collectionview, or a listview with a grid in each element.

But not sure that this is the proper aproach. What would a current good solution be to create a 2 column scrollable miniature gallery with the current tools available in xamarin?

Junior Jiang · Accepted Answer · 2020-03-18T01:49:19.357

You can only use CollectionView to implement it.

There is a layout property of CollectionView : Span

Span, of type int, that represents the number of columns or rows to display in the grid. The default value of this property is 1, and its value must always be greater than or equal to 1.

You can follow the bellow code :

Vertical list : CollectionView can display its items in a vertical grid by setting its ItemsLayout property to a GridItemsLayout object whose Orientation property is set to 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>

The model binded in ContentPage :

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

About the MonkeysViewModel.cs , you can havev a look at this official sample link .

The effect :

Thank you very much! could you please also share the code where you set up your bindings? If i got it right, if I only need the picture without text, i would delete the whole "grid" part, and all the labels, leaving only the image inisde the data template. right? — sharkyenergy, Mar 17 '20 at 09:38
@sharkyenergy Okey ,binding in ContentPage . I have updated the answer . — Junior Jiang, Mar 18 '20 at 01:20

Xamarin - scrollable minature list

1 Answers1