c# - C# Xamarin 在 TabbedPage 中使用 ObservableCollection 形成嵌套列表

问题描述

我正在尝试创建具有不同嵌套ListViews绑定的不同选项卡ObservableCollection。这让我有点不知所措。解决起来应该很简单。

这就是我的TabbedPagexaml 的样子

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
             x:Class="scorePredict.Views.TabbedItemsPage" ItemsSource="{Binding Things}">
  <!--Pages can be added as references or inline-->
    <TabbedPage.ItemTemplate>
        <DataTemplate>
            <ContentPage Title="{Binding description}">
                <StackLayout>
                    <ListView ItemsSource="{Binding DetailedViewModel.sortedItems}">
                        <ListView.HeaderTemplate >
                            <DataTemplate>
                                <Grid BackgroundColor="Black">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Label Text="Time" Grid.Column="0" Margin="5,0,0,0" TextColor="Gold" HorizontalOptions="StartAndExpand" HeightRequest="20" WidthRequest="50"/>
                                    <Label Text="Host" Grid.Column="1" TextColor="Gold" HorizontalOptions="CenterAndExpand" Margin="0,0,170,0"/>
                                    <Label Text="Guest" Grid.Column="1" TextColor="Gold" HorizontalOptions="CenterAndExpand" Margin="110,0,0,0"/>
                                    <Label Text="TIP" HorizontalOptions="EndAndExpand" TextColor="Gold" Grid.Column="1"/>
                                </Grid>
                            </DataTemplate>
                        </ListView.HeaderTemplate>

                        <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>
</TabbedPage>

这是后台代码

public TabbedItemsPage()
        {
            InitializeComponent();

            BindingContext = new CurrentStatusDeviceViewModel();            
        }

public class CurrentStatusDeviceViewModel
    {
        public ObservableCollection<TabViewModel> 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();
            }
        }
    }

这些是我的列表类

public class Titles : ObservableCollection<Item>
    {
        //public List<Matches> Monkeys { get; set; }
        public string Intro { get; set; }
        public string Summary { get; set; }
        public Uri imagePath { get; set; }
        public Titles(List<Item> 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; }
    }

我的问题是创建了五个标题，但未在其中创建项目，并且标题的标题未绑定。它只是空的。有任何想法吗？

标签： c#listviewxamarinxamarin.androidobservable

c# - C# Xamarin 在 TabbedPage 中使用 ObservableCollection 形成嵌套列表

问题描述

解决方案

推荐阅读