How To Create a Grid inside a Listview Binding Xamarin.Forms

Question

How can I create a Grid inside a ListView with data binding? I am creating this app with Xamarin.Forms.

If I don't know how many rows and columns I need, how can I dynamically create the Grid inside the ListView binding?

This is what I have so far:

<ListView x:Name="List" HasUnevenRows="True">
  <ListView.ItemTemplate>
   <DataTemplate>
    <ViewCell>
      <ViewCell.View>
        <Grid Padding="10,10,10,10">
          <Grid.RowDefinitions>
            <RowDefinition Height="200"></RowDefinition>
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="200"></ColumnDefinition>
          </Grid.ColumnDefinitions>
          <StackLayout BackgroundColor="#313FA0" Grid.Row="0" Grid.Column="0" HeightRequest="200" WidthRequest="200">
            <Label Text="{Binding NUMBER}" FontSize="50" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
            <Label Text="{Binding NAME}" FontSize="30" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
          </StackLayout>
        </Grid>
      </ViewCell.View>
    </ViewCell>
   </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

In this code only one row and one column are created. If I have multiple data points, how can I resolve this issue? For example, if I need one row with two columns.

Thanks in advance.

Solution 1

You can use the next approach-example (throug xaml, front side) as well.

<ContentPage.Resources>
      <ResourceDictionary>
        <Color x:FactoryMethod="FromHex" x:Key="fondoBlancoPalido">
          <x:Arguments>
            <x:String>#F2F2F2</x:String>
          </x:Arguments>
        </Color>
      </ResourceDictionary>
    </ContentPage.Resources>

<ListView x:Name="listView" HasUnevenRows="True"  ItemsSource="{Binding .}" BackgroundColor="{StaticResource fondoBlancoPalido}">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <ViewCell.View>
                <Grid Padding="5">
                  <Grid.RowDefinitions>
                    <RowDefinition Height="60"></RowDefinition>
                    <RowDefinition Height="60"></RowDefinition>
                    <RowDefinition Height="10"></RowDefinition>
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="2*"></ColumnDefinition>
                    <ColumnDefinition Width="3*"></ColumnDefinition>
                  </Grid.ColumnDefinitions>

                  <Button Grid.Row="0" Grid.Column="0" Clicked="OnStartClicked" Image="play.png" BackgroundColor="Transparent" HorizontalOptions="Center" Grid.RowSpan="2"/>
                  <Label Grid.Row="0" Grid.Column="1" Text="Hora de Inicio: " XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold"/>
                  <Label Grid.Row="0" Grid.Column="2" Text="{ Binding attribute3 }" XAlign="Center" YAlign="Center" TextColor="Black"/>
                  <Label Grid.Row="1" Grid.Column="1" Text="Encargado de la Tarea: " XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold"/>
                  <Label Grid.Row="1" Grid.Column="2" Text="{ Binding attribute4 }" XAlign="Center" YAlign="Center" TextColor="Black"/>
                  <BoxView Color="Navy" HeightRequest="2" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"/>
                </Grid>
              </ViewCell.View>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>

Solution 2

There is not a good way to dynamically build a Grid layout with a variable number of rows or columns in XAML. I suggest creating the DataTemplate in your code-behind file, where you can easily add as many RowDefinitions and ColumnDefinitions as you need. Here's an example:

        var myDataTemplate = new DataTemplate(() =>
        {
            var cell = new ViewCell();
            var grid = new Grid();

            foreach (var record in myRecords)
            {
                grid.RowDefinitions.Add(new RowDefinition());
            }

            foreach (var field in myFields)
            {
                grid.ColumnDefinitions.Add(new ColumnDefinition());
            }

            /*
             * 
             * Populate grid here...
             * 
             */

            cell.View = grid;
            return cell;
        });

Then just assign this DataTemplate to your ListView.