Add rows dynamically to grid within ListView

Question

I have the following ListView-

<ListView x:Name="listViewm" ItemsSource="{ Binding Rows }">
        <ListView.Header >
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Label Text="Name" Grid.Column="3"  FontSize="Medium" />
                <Label Text="Age" Grid.Column="2" FontSize="Medium" />
                <Label Text="DOB" Grid.Column="1" FontSize="Medium" />
            </Grid>
        </ListView.Header>

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*"></ColumnDefinition>
                            <ColumnDefinition Width="1*"></ColumnDefinition>
                            <ColumnDefinition Width="1*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <!--I need my Row values here-->

                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

I need to create a row for each entry I have in a list and add it to the grid dynamically -

protected override void OnAppearing()
{
    CreateGrid();
}

public ObservableCollection<Row> Rows { get; set; }

public class Row
{
    public string Name { get; set; }
    public string Age { get; set; }
    public string DOB { get; set; }
}

public void CreateGrid()
{
    Rows = new ObservableCollection<Row>();
    Rows.Clear();

    foreach(var entry in entryList) { // entryList just contains values I use to populate row info 

        var row = new Row();
        row.Name = entry.name;
        row.Age = entry.age;
        row.DOB = entry.dob;

        Rows.Add(row);
    }
}

The itemSource is not binding so no new rows are being create, I tried removing ItemsSource="{ Binding Rows }" in the XAML and using listViewm.ItemsSource = Rows in the code behind instead however this also did not work.

So if entryList had 3 test entries for John, Bob and Bill the table should look like -

+----------------+
| Name  Age DOB  |
+----------------+
| John  31 06/09 |
| Bill  32 07/10 |
| Bob   34 08/11 |
+----------------+

Marcel Callo · Accepted Answer · 2020-04-28 13:28:07Z

2

Your are not adding your values to the listview.

<ListView x:Name="listViewm" ItemsSource="{ Binding Rows }">
    <ListView.Header >
        <Grid >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Label Text="Name" Grid.Column="3"  FontSize="Medium" />
            <Label Text="Age" Grid.Column="2" FontSize="Medium" />
            <Label Text="DOB" Grid.Column="1" FontSize="Medium" />
        </Grid>
    </ListView.Header>

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"></ColumnDefinition>
                        <ColumnDefinition Width="1*"></ColumnDefinition>
                        <ColumnDefinition Width="1*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <!--I need my Row values here-->
                    <Label Text="{Binding Name}" />
                    <Label Grid.Column="1" Text="{Binding Age}" />
                    <Label Grid.Column="2" Text="{Binding DOB}" />

                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>

answered Apr 28, 2020 at 13:28

Marcel Callo

4672 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ebikeneser Over a year ago

Still no values :(

Marcel Callo Over a year ago

How are you retrieving the data of your your entryList ? Make sure the entryList is not null or empty.

Ebikeneser Over a year ago

The entry list has values, I even just created a new row manually and added it to Rows collections, still nothing :( I am new to mobile development but perhaps this is something to do with a view model?

Marcel Callo Over a year ago

Your entryList should be public not private. Can you show how you declare it ?

Pepijn · Accepted Answer · 2020-04-28 13:46:36Z

1

I could be wrong but when you initialize the Rows object , you should update the itemsSource of the listview.

public void CreateGrid()
{
    Rows = new ObservableCollection<Row>();
    Rows.Clear();
    // Rows is initialized as a new collection so update the itemssource
    listViewm.ItemsSource = Rows;

    foreach(var entry in entryList) 
    { 
        // entryList just contains values I use to populate row info 
        var row = new Row();
        row.Name = entry.name;
        row.Age = entry.age;
        row.DOB = entry.dob;

        Rows.Add(row);
    }
}

answered Apr 28, 2020 at 13:46

Pepijn

657 bronze badges

1 Comment

Pepijn Over a year ago

It might even be better to initialize the Rows component in the screen class constructor instead of the CreateGrid function.

Collectives™ on Stack Overflow

Add rows dynamically to grid within ListView

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related