C#Xamarin表单Listview将BindingContext设置为嵌套列表

时间:2019-08-17 19:19:01

标签: c# listview xamarin.forms binding nested

我在ListView中有一个经典的Xamarin Form,并且我试图绑定它的内容。 我来自UWP,使用CollectionViewSource,这里有些不同。

XAML

<StackLayout>
        <ListView x:Name="listView" 
                ItemsSource="{Binding Monkeys}" 
                Header="{Binding Intro}"
                Footer="{Binding Summary}">
            <ListView.HeaderTemplate >
                <DataTemplate>
                    <StackLayout Orientation="Horizontal" 
                        Padding="10,5,5,10"
                        BackgroundColor="Yellow">
                        <Label Text="~~"/>
                        <Label Text="{Binding .}"/>
                        <Label Text="~~"/>
                    </StackLayout>
                </DataTemplate>
            </ListView.HeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

背景代码

var results = new List<Matches> {
                new Matches {Name="Xander", Description="Writer"},
                new Matches {Name="Rupert", Description="Engineer"},
                new Matches {Name="Tammy", Description="Designer"},
                new Matches {Name="Blue", Description="Speaker"},
            };
            var header = new List<Titles> { new Titles { Monkeys = results, Intro = "This is a big header", Summary = "This is the end" } };
            header.Add(new Titles { Monkeys = results, Intro = "Shift", Summary = "Yeah" } );
            //BindingContext = header;
            BindingContext = new Titles { Monkeys = results, Intro = "This is a big header", Summary = "This is the end"};

class Matches
    {
        public string Name { get; set; }
        public string Description { get; set; }
    }
    class Titles
    {
        public List<Matches> Monkeys { get; set; }
        public string Intro { get; set; }
        public string Summary { get; set; }
    }

正如您在注释行中看到的那样,它不绑定列表,因此被注释掉了:) 知道是否可以将其内容与具有多个标题和项目的嵌套列表绑定吗? 我在这里做什么错了?

1 个答案:

答案 0 :(得分:1)

根据您的数据,我认为您应该显示组数据列表。 您可以尝试以下代码:

类匹配

public class Matches
{
    public string Name { get; set; }
    public string Description { get; set; }
}

班级标题

public class Titles : ObservableCollection<Matches>
{
    //public List<Matches> Monkeys { get; set; }
    public string Intro { get; set; }
    public string Summary { get; set; }

    public Titles(List<Matches> list):base(list)
    {
    }
}

MainPage类

public partial class MainPage : ContentPage
{
    public ObservableCollection<Titles> sortedItems { get; set; }

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

    public MainPage()
    {
        InitializeComponent();
        listView.ItemsSource = getData();
    }


    public List<Titles> getData() {

        items = new ObservableCollection<Matches> {
            new Matches {Name="Xander", Description="Writer"},
            new Matches {Name="Rupert", Description="Engineer"},
            new Matches {Name="Tammy", Description="Designer"},
            new Matches {Name="Blue", Description="Speaker"},
        };


        List<Titles> sortedItems = new List<Titles>() {
            new Titles(items.ToList()){ Intro = "This is a big header", Summary = "This is the end" },
            new Titles(items.ToList()){ Intro = "Shift", Summary = "Yeah" },
            new Titles(items.ToList()){ Intro = "This is a big header", Summary = "This is the end" },
        };

        return sortedItems;
    }
}

MainPage.xaml

   <StackLayout>
    <ListView
            HasUnevenRows="True"
            x:Name="listView" 
            IsGroupingEnabled = "True">
        <ListView.GroupHeaderTemplate >
            <DataTemplate>
                <ViewCell Height="40">
                    <StackLayout Orientation="Horizontal"
                             BackgroundColor="#3498DB"
                             VerticalOptions="FillAndExpand">
                        <Label Text="{Binding Intro}"
                           VerticalOptions="Center" />
                        <Label Text="   "/>
                        <Label Text="{Binding Summary}"
                           VerticalOptions="Center" />

                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>

        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

效果如下: enter image description here

注意:

根据我的理解,您想在每个组List的位置显示这两个字段,对吗?这样ListView.GroupHeaderTemplate就可以满足我们的需求。您可以根据需要自定义ListView.GroupHeaderTemplate的布局,因此可以同时显示IntroSummary