Making a gallery form in Xamarin Form

Question

I am making a photo gallery that takes JSON of an image name from an url. Using list form really dont give a good UX so i am planning to change in grid form. try some code i found in stackoverflow. The problem is i try to create an array binding so that as the number of photo increase in the database the app will add a new grid for it and display it.

<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>

this is in the XAML format now i am trying to create a cs that bind with this where will automatically create a grid file to display the image from the JSON file. Thanks in advance

Answer 1

Grid does not have a property like ItemsSource . So you will need to at least Add the images programatically.

protected override void OnAppearing ()
{
   base.OnAppearing();

   // Create cols for each img
   for(int col = 0; col < Images.Length; ++col){
       grid.ColumnDefinitions.Add(new ColumnDefinitions { Width = new GridLenght(1, GridUnitType.Star)});
   }
   // Populate grid
   for(int col = 0; col < Images.Length; ++col){
       grid.Children.Add(new Image { source = Images[col] },0,col);
   }
}

If you want to do everything in XAML. Use FlowListView

Edit: I did 2 for's cause I'm not sure if you try to Add while you are creating the ColumnDefinition it will work. Anyway try it out one way or the other.