locked
C# Xamarin Forms Items not set in a Grouped ListView RRS feed

  • Question

  • User388390 posted

    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>
    
    Tuesday, June 23, 2020 10:39 PM

Answers

  • User369979 posted

    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/

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, June 24, 2020 2:44 AM