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

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:

CodePudding user response：

There is something wrong in your code. If you want the item's data show next to eachother on one line. You need to change the Orientation="Vertical" to Orientation="Horizontal".

You can try the following code.

 <CollectionView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                    SelectionMode="None" ItemsSource="{Binding AllProducts}" x:Name="ProductsCollection">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" ItemSpacing="20"/>
    </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>
</CollectionView>

If you need more information, you can check the official document. https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout

CodePudding user response：

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>