Designing image gallery in xamarin.forms

You can use this nuget package and display Image in grid. Sample code for that:

<flv:FlowListView FlowColumnCount="3" SeparatorVisibility="None" HasUnevenRows="false" FlowItemTappedCommand="{Binding ItemTappedCommand}" FlowItemsSource="{Binding PhotosList}" > <flv:FlowListView.FlowColumnTemplate> <DataTemplate> <StackLayout> <Image Source="{Binding Image}" HeightRequest="50" WidthRequest="50"/> <Label Text="{Binding Name}" TextColor="Black" FontSize="Medium" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" HorizontalOptions="Fill" /> </StackLayout> </DataTemplate> </flv:FlowListView.FlowColumnTemplate> </flv:FlowListView> 

Where PhotosList will be your list of your Url and Text.

There is a gallery control in Xamarin.Droid Please see the sample -http://developer.xamarin.com/guides/android/user_interface/gallery/

If this is not what you are looking for then You can use your own Listview with images. And onseletion you can show the full image. See sample of list view with images in xamarin.form examples.

If you need multiple column use stack layout in horizontal rendering and inside that list views, probably 3.

That will give you 3 columns and unlimited scrollable rows.

EDIT : You have to create a ViewModel that would have a class with public properties that you want to bind to. Deserialize your JSON into an IEnumerable of this ViewModel class and bind to your listview. Inside the Listview you have to use ImageCell

For Creating an image since you have mentioned it to be from an URL, the following syntax would help you:

 webImage.Source = new UriImageSource { Uri = new Uri("http://xamarin.com/content/images/pages/forms/example-app.png"), CachingEnabled = true, CacheValidity = new TimeSpan(5,0,0,0) }; 

The employee example binds a ListView with one image and 2 labels.

class EmployeeCell : ViewCell { public EmployeeCell() { var image = new Image { HorizontalOptions = LayoutOptions.Start }; image.SetBinding(Image.SourceProperty, new Binding("ImageUri")); image.WidthRequest = image.HeightRequest = 40; var nameLayout = CreateNameLayout(); var viewLayout = new StackLayout() { Orientation = StackOrientation.Horizontal, Children = { image, nameLayout } }; View = viewLayout; } } 

EDIT 2 : In case you have variable number of image URLs to be rendered then you will be better off going for a TableView. TableView isnt bound to a datasource and you can create individual cells as per your requirement by parsing the JSON object. ie : Each JSON object would be a TableSection and each Image would be a ImageCell

I ended up splitting my source JSON array into 3 columns using this code

return myGroupedGalleryDto.Select ((row, index) => new {row, index}) .GroupBy (g => g.index / 3, i => i.row) .Select ((v, k) => new GalleryDto () { Key = k, Images = v.ToList () }).ToList (); 

and then in XAML,

<Grid x:Name="grid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Grid.Column="0" Source="{Binding Images[0].MyImageUrl}" /> <Image Grid.Column="1" Source="{Binding Images[1].MyImageUrl}" /> <Image Grid.Column="2" Source="{Binding Images[2].MyImageUrl}" /> </Grid> 

Using the following ViewModels

public class GalleryDto { public int ID { get; set; } public string MyImageUrl { get; set; } } public class GroupedGalleryDto { public int Key { get; set; } public List<GalleryDto> Images { get; set; } }