How can I show 3 column in Xamarin with binding - xamarin

Question

I want to make my grid system like each row has 3 columns. I am binding the products and each product Type, Name and Stock.
Here is my code:
<CollectionView Grid.Row="3" Margin="25" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
SelectionMode="None" ItemsSource="{Binding AllProducts}" x:Name="ProductsCollection">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="20"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<pv:PancakeView HasShadow="True" BackgroundColor="#EEF2FF" VerticalOptions="StartAndExpand"
HorizontalOptions="FillAndExpand">
<Grid ColumnSpacing="3" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<BoxView Grid.RowSpan="1" BackgroundColor="#EEF2FF"/>
<BoxView Grid.Column="1" Grid.RowSpan="1" BackgroundColor="#EEF2FF"/>
<BoxView Grid.Column="2" Grid.RowSpan="1" BackgroundColor="#EEF2FF"/>
<Button
Text="{Binding Name}"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="Black"
BackgroundColor="#EEF2FF"
/>
</Grid>
</pv:PancakeView>
</DataTemplate>
</CollectionView>
In this way, the products are being shown like each row has one column. So how can I make it 3?
Currently the view is like this:
So what I am trying to achieve is Cola, Water and Soda next to each other.
Here is my product list:
private ObservableCollection<Product> GetProduct()
{
return new ObservableCollection<Product>
{
new Product { Type = "Drink", Name = "Cola", Stock = 123 },
new Product { Type = "Drink", Name = "Water", Stock = 123 },
new Product { Type = "Drink", Name = "Soda", Stock = 123 },
new Product { Type = "Food", Name = "Pizza", Stock = 123 },
new Product { Type = "Food", Name = "Salad", Stock = 123 },
new Product { Type = "Food", Name = "Pasta", Stock = 123 },
new Product { Type = "Drink", Name = "Cola", Stock = 123 },
new Product { Type = "Drink", Name = "Cola", Stock = 123 },
new Product { Type = "Drink", Name = "Cola", Stock = 123 },
new Product { Type = "Food", Name = "Fries", Stock = 123 },
new Product { Type = "Food", Name = "Burger", Stock = 123 },
new Product { Type = "Sauce", Name = "Mayo", Stock = 123 },
new Product { Type = "Sauce", Name = "Ketchup", Stock = 123 },
};
}private ObservableCollection<Product> GetProduct()
{
return new ObservableCollection<Product>
{
new Product { Type = "Drink", Name = "Cola", Stock = 123 },
new Product { Type = "Drink", Name = "Water", Stock = 123 },
new Product { Type = "Drink", Name = "Soda", Stock = 123 },
new Product { Type = "Food", Name = "Pizza", Stock = 123 },
new Product { Type = "Food", Name = "Salad", Stock = 123 },
new Product { Type = "Food", Name = "Pasta", Stock = 123 },
new Product { Type = "Drink", Name = "Cola", Stock = 123 },
new Product { Type = "Drink", Name = "Cola", Stock = 123 },
new Product { Type = "Drink", Name = "Cola", Stock = 123 },
new Product { Type = "Food", Name = "Fries", Stock = 123 },
new Product { Type = "Food", Name = "Burger", Stock = 123 },
new Product { Type = "Sauce", Name = "Mayo", Stock = 123 },
new Product { Type = "Sauce", Name = "Ketchup", Stock = 123 },
};
}
So the Grid.Column needs to be 0, 1, 2 in Row 0 and then when the Row is 1, Grid.Column needs to be 0, 1, 2 again but I dont know is there any dynamic way.
This is what I am trying to achieve:

Answer 1

You want the collectionview to display as a grid which has three columns. So you should need to set <CollectionView.ItemsLayout> as GridItemsLayout. Such as the following code. And the value of the Span means the number of the columns.
<CollectionView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
SelectionMode="None" ItemsSource="{Binding AllProducts}" x:Name="ProductsCollection">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="3" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<pv:PancakeView HasShadow="True" BackgroundColor="#EEF2FF" VerticalOptions="StartAndExpand"
HorizontalOptions="FillAndExpand">
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Button
Text="{Binding Name}"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="Black"
BackgroundColor="#EEF2FF"
/>
</Grid>
</pv:PancakeView>
</DataTemplate>
</CollectionView.ItemTemplate>