C# Xamarin forms Nested Listiews in TabbedPage with ObservableCollection

iAndiiAndi Member ✭✭

I am trying to create different tabs with different nested ListViews binding to ObservableCollection. This is getting a bit over my head. It should be very simple to solve.

This is how my TabbedPage xaml looks like


<TabbedPage.ItemTemplate>




<ListView.HeaderTemplate >


<Grid.ColumnDefinitions>


</Grid.ColumnDefinitions>

                    <ListView.Header  >
                        <StackLayout Padding="10,5,0,5" BackgroundColor="Green" Orientation="Horizontal">
                            <Label Text="{Binding Name}" />
                            <Label Text="{Binding Description}" FontSize="Small"/>
                        </StackLayout>
                    </ListView.Header>

                    <ListView.GroupHeaderTemplate >
                        <DataTemplate>
                            <ViewCell Height="30">
                                <StackLayout Orientation="Horizontal"
                         BackgroundColor="Goldenrod"
                         VerticalOptions="FillAndExpand">
                                    <Image Source="{Binding imagePath}" VerticalOptions="Center" HorizontalOptions="Start" HeightRequest="20" WidthRequest="20"/>
                                    <Label Text="{Binding Intro} " VerticalOptions="Center"/>
                                    <Label Text="{Binding Summary}" VerticalOptions="Center"/>
                                    <Label Text="TIP" VerticalOptions="Center" HorizontalOptions="EndAndExpand"/>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.GroupHeaderTemplate>

                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <ViewCell.View>
                                    <Grid Padding="5">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="50" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Label Text="{Binding Time}" Grid.Column="0"></Label>
                                        <Label Text="{Binding TeamOne}" Grid.Column="1" HorizontalTextAlignment="End" HorizontalOptions="CenterAndExpand" Margin="0,0,170,0"></Label>
                                        <Label Text="{Binding ScoreTeamOne}" Grid.Column="1" TextColor="White" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" Margin="0,0,50,0" WidthRequest="20" BackgroundColor="Gray"></Label>
                                        <Label Text="{Binding ScoreTeamTwo}" Grid.Column="1" TextColor="White" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" Margin="0,0,5,0" WidthRequest="20" BackgroundColor="Gray"></Label>
                                        <Label Text="{Binding TeamTwo}" Grid.Column="1" HorizontalTextAlignment="Start" HorizontalOptions="CenterAndExpand" Margin="110,0,0,0"></Label>
                                        <Label Text="{Binding Tip}" Grid.Column="1" HorizontalOptions="EndAndExpand" WidthRequest="20" HorizontalTextAlignment="Center" TextColor="White" BackgroundColor="{Binding TipBGColor}"></Label>
                                    </Grid>
                                </ViewCell.View>
                            </ViewCell>
                            <!--<TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>-->
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </ContentPage>
    </DataTemplate>
</TabbedPage.ItemTemplate>

This is the background code

public TabbedItemsPage()
{
InitializeComponent();

        BindingContext = new CurrentStatusDeviceViewModel();            
    }

public class CurrentStatusDeviceViewModel
{
public ObservableCollection Things { set; get; }

    public CurrentStatusDeviceViewModel()
    {
        // Here I create three demo pages
        Things = new ObservableCollection<TabViewModel>();
        for (int i = 0; i < 7; i++)
        {
            Things.Add(new TabViewModel(i.ToString()) { description = "description" + i });
        }
    }
}

public class TabViewModel
{
    public string description { set; get; }

    public string TabID { set; get; }

    public CurrentStatusDeviceDetailedViewModel DetailedViewModel { set; get; }

    public TabViewModel(string tabID)
    {
        TabID = tabID;

        // Pass Tab ID to the second view model
        DetailedViewModel = new CurrentStatusDeviceDetailedViewModel(tabID);
    }
}

public class CurrentStatusDeviceDetailedViewModel
{

    public string CurrentID { set; get; }
    public ObservableCollection<Titles> sortedItems { get; set; }

    public ObservableCollection<Item> items { get; set; }

    public CurrentStatusDeviceDetailedViewModel(string tabId)
    {

        CurrentID = tabId;

        // I simulate the lists here
        sortedItems = new ObservableCollection<Titles>();
        items = new ObservableCollection<Item>();
        for (int i = 0; i < 5; i++)
        {
            for (int x = 0; x < 10; x++)
            {
                items.Add(new Item { Time = CurrentID + i, TeamOne = "Barcelona", ScoreTeamOne = "2", TeamTwo = "Real Madrid", ScoreTeamTwo = "1" });
            }
            sortedItems.Add(new Titles(items.ToList()) { Intro = "This is a big header", Summary = "This is the end" });
            items.Clear();
        }
    }
}

And these are my classes for the lists

public class Titles : ObservableCollection
{
//public List Monkeys { get; set; }
public string Intro { get; set; }
public string Summary { get; set; }
public Uri imagePath { get; set; }
public Titles(List list) : base(list)
{
}
}
public class Item
{
public string Id { get; set; }
public string Text { get; set; }
public string Description { get; set; }
public string Href { get; set; }
public string Time { get; set; }
public string TeamOne { get; set; }
public string ScoreTeamOne { get; set; }
public string ScoreTeamTwo { get; set; }
public string TeamTwo { get; set; }
public string Tip { get; set; }
public Color TipBGColor { get; set; }
}

My problem here is that the five headers are created but items are not created within them and the titles of the headers are not binded. It is just empty. Any ideas?

Best Answer

Answers

Sign In or Register to comment.