How to bind multiple rows and columns to the list view?

unknown123unknown123 Member ✭✭✭

my list view containing grid, i need to bind dynamically a multiple rows and columns inside the grid.

(Grid.Row and Grid.column values are getting from the list view)

This is my xaml code:

<ListView x:Name="xxxx" HasUnevenRows="True" SeparatorVisibility="None" VerticalOptions="FillAndExpand">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid BackgroundColor="White">
                   <Image Source = {Binding image} Grid.Row = {Binding rowNo} Grid.Column = {Binding columnNo}/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

This is my cs:

new item { image = "x.png", rowNo = "1", columnNo = "0"}

By using this im getting an output
(For Example: Grid.row =2 Grid.column =2
My output was :

            1         
                 1     
            1
                 1

Im getting it as a 4 line instead of getting it in a 2 lines)

how to resolve this???

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited April 26

    code

    <ListView x:Name="xxxx" HasUnevenRows="True" SeparatorVisibility="None" VerticalOptions="FillAndExpand">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid BackgroundColor="Green">
                            <Label BackgroundColor="Red" Text="{Binding text}" Grid.Row="{Binding row}" Grid.Column="{Binding column}"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView> 
    
    for(int i = 0; i < 2; i++)
            {
                for (int j = 0; j < 2; j++)
                {
                    list.Add(new Model { text = "111", row = i, column = j });
                }
            }
            xxxx.ItemsSource = list;     
    

    Image

    First you have to know the list count is 4, so it will be 4 cells in ListView.

    The grid occupy the whole space of cell , the label is placed according the Grid.Row and Grid.Column(the default height and width depends on how many rows and columns the grid has ,here is a half of full ) ,please note Grid.Row and Grid.Column only works on the current Grid not the next Grid .

    About the Grid Layout ,Look at

    https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#horizontal-grid

  • unknown123unknown123 Member ✭✭✭

    Yes I know it will take the list count as 4

    If I use the Flow List view it will took extra space for upcoming binding grids as well as image size also reducing.

    Is there any other way..????

  • ColeXColeX Member, Xamarin Team Xamurai

    Maybe you could try datagrid in syncfusion .

Sign In or Register to comment.