C# Xamarin Forms Items not set in a Grouped ListView

iAndi · June 2020

I am trying to set the ItemsSource of a ListView from a nested ObservableCollection List. While HeaderGroups are being created, Items in the groups are empty. Any idea? Here is my code:

public class TableDataGroup
{
    public TableDataGroup(String imagepath, String championship, String tip)//, Color headergroupbgcolor,)
    {
        this.ImagePath = imagepath;
        this.Championship = championship;
        this.Tip = tip;
        this.Items = new ObservableCollection<TableDataItem>();
    }

    public string ImagePath { get; private set; }
    public string Championship { get; private set; }
    public string Tip { get; private set; }

    public ObservableCollection<TableDataItem> Items { get; set; }
}

public class TableDataItem
{
    public TableDataItem(String imagepath, Color backgroundTipColour, String time, String teamone...)
    {
        this.ImagePath = imagepath;
        this.BackgroundTipColour = backgroundTipColour;
        this.Time = time;
        this.TeamOne = teamone;
        //...
    }

    public string ImagePath { get; private set; }
    public Color BackgroundTipColour { get; private set; }
    public string Time { get; private set; }
    public string TeamOne { get; private set; }
    //...
}

Calls:

mainPageLoadViewModel.tableDataGroup = new ObservableCollection<TableDataGroup>();
for (int i = 0; i < 10; i++)
{
    TableDataGroup tableDataGroup = new TableDataGroup("value", "value", "value","TIP");
    for (int x = 0; x < 10; x++)
        {
            tableDataGroup.Items.Add(new TableDataItem("flag",
                                                       backgroundtipcolor,
                                                       time,
                                                       teamone,
                                                       //...));
        }
        mainPageLoadViewModel.tableDataGroup.Add(tableDataGroup);
}
ItemsCollectionView.ItemsSource =  mainPageLoadViewModel.tableDataGroup; `

xaml:

<ListView x:Name="ItemsCollectionView" ItemsSource="{Binding TableDataGroup}"
  IsGroupingEnabled="true" HasUnevenRows="True">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                    <ViewCell.View>
                        <StackLayout BackgroundColor="DarkSlateGray" Orientation="Horizontal">
                            <StackLayout Padding="2" VerticalOptions="CenterAndExpand">
                            <Image Source="{Binding ImagePath}" HeightRequest="15" WidthRequest="15"/>
                            </StackLayout>
                            <StackLayout Padding="2" VerticalOptions="CenterAndExpand">
                            <Label Text="{Binding Championship}" FontSize="15" TextColor="White"/>
                            </StackLayout>
                            <StackLayout Margin="0,0,10,0" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand">
                                <Label Text="TIP" FontSize="15" TextColor="White"/>
                            </StackLayout>
                        </StackLayout>
                    </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                    <Grid Padding="10,5,5,10" BackgroundColor="Gray">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="25" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="35"/>
                            <ColumnDefinition Width="120"/>
                            <ColumnDefinition Width="25"/>
                            <ColumnDefinition Width="25"/>
                            <ColumnDefinition Width="120"/>
                            <ColumnDefinition Width="45"/>
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding Time}" Grid.Column="0" FontSize="13" TextColor="Black" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand"></Label>
                        <Label Text="{Binding TeamOne}" FontSize="13" TextColor="Black" Grid.Column="1" VerticalTextAlignment="Center" HorizontalOptions="End"></Label>
                        <Label Text="{Binding ScoreTeamOne}" FontSize="13" Grid.Column="2" BackgroundColor="Gray" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" WidthRequest="25" MinimumWidthRequest="25"></Label>
                        <Label Text="{Binding ScoreTeamTwo}" FontSize="13" Grid.Column="3" BackgroundColor="Gray" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" WidthRequest="25" MinimumWidthRequest="25"></Label>
                        <Label Text="{Binding TeamTwo}" FontSize="13" TextColor="Black" Grid.Column="4" VerticalTextAlignment="Center"></Label>
                        <Label Text="{Binding Tip}" FontSize="13" TextColor="White" Grid.Column="5" BackgroundColor="DarkSlateGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="Fill"></Label>
                    </Grid>
                </ViewCell.View>
            </ViewCell>
            <!--<TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>-->
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

LandLu · June 2020

TableDataGroup should inherit from an ObservableCollection like:

public class TableDataGroup : ObservableCollection<TableDataItem>
{
    public TableDataGroup(String imagepath, String championship, String tip)//, Color headergroupbgcolor,)
    {
        this.ImagePath = imagepath;
        this.Championship = championship;
        this.Tip = tip;
        //this.Items = new ObservableCollection<TableDataItem>();
    }

    public string ImagePath { get; private set; }
    public string Championship { get; private set; }
    public string Tip { get; private set; }

    //public ObservableCollection<TableDataItem> Items { get; set; }
}

And then we could add items in it directly like:

mainPageLoadViewModel.tableDataGroup = new ObservableCollection<TableDataGroup>();
for (int i = 0; i < 10; i++)
{
    TableDataGroup tableDataGroup = new TableDataGroup("value", "value", "value");
    for (int x = 0; x < 10; x++)
    {
        tableDataGroup.Add(new TableDataItem("flag",
                                                    Color.Red,
                                                    "time",
                                                    "teamone"));
                                                        //...));
    }
    mainPageLoadViewModel.tableDataGroup.Add(tableDataGroup);
}
ItemsCollectionView.ItemsSource = mainPageLoadViewModel.tableDataGroup;

Here is the sample and documentation:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#grouping
https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-listview-grouping/

LandLu · June 2020

TableDataGroup should inherit from an ObservableCollection like:

public class TableDataGroup : ObservableCollection<TableDataItem>
{
    public TableDataGroup(String imagepath, String championship, String tip)//, Color headergroupbgcolor,)
    {
        this.ImagePath = imagepath;
        this.Championship = championship;
        this.Tip = tip;
        //this.Items = new ObservableCollection<TableDataItem>();
    }

    public string ImagePath { get; private set; }
    public string Championship { get; private set; }
    public string Tip { get; private set; }

    //public ObservableCollection<TableDataItem> Items { get; set; }
}

And then we could add items in it directly like:

mainPageLoadViewModel.tableDataGroup = new ObservableCollection<TableDataGroup>();
for (int i = 0; i < 10; i++)
{
    TableDataGroup tableDataGroup = new TableDataGroup("value", "value", "value");
    for (int x = 0; x < 10; x++)
    {
        tableDataGroup.Add(new TableDataItem("flag",
                                                    Color.Red,
                                                    "time",
                                                    "teamone"));
                                                        //...));
    }
    mainPageLoadViewModel.tableDataGroup.Add(tableDataGroup);
}
ItemsCollectionView.ItemsSource = mainPageLoadViewModel.tableDataGroup;

Here is the sample and documentation:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#grouping
https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-listview-grouping/

Xamarin

Quick Links

C# Xamarin Forms Items not set in a Grouped ListView

Best Answer

Answers