Xamarin.Forms被分组的ListView.

groupedlistview.

呈现用户长期列表。地址簿中的人员可能有点压倒,因为用户没有结构来引导他通过列表。因此,如果我们有几个可以轻松分组的条目,它可以在滚动列表时真正帮助用户。

  1. 列出您的参赛作品
  2. 分组参赛作品
  3. 启用GroupNavigation.

列出您的参赛作品

因此,允许创建一个新的XAML页面并将列表添加到其中。我将使用TextCell for此演示,但Xamarin.Forms有许多不同 默认单元格模板 you can choose from.

<ListView x:Name="TheListView" ItemsSource="{Binding BindingContext}" ItemSelected="TheListViewOnItemSelected">  <ListView.ItemTemplate>    <DataTemplate>      <TextCell Text="{Binding Fullname}" Detail="{Binding Description}" />    </DataTemplate>  </ListView.ItemTemplate></ListView>

绑定上下文设置在后面的代码中。

var data = new List<Person>();for (var i = 0; i < 50; ++i){    data.Add(new Person(NameGenerator.GenRandomFirstName(), NameGenerator.GenRandomLastName(), "ID " + i));}BindingContext = data;

分组参赛作品

在下一步中,让我们组联系人列表。首先让我们启用ListView以接受分组。

<ListView x:Name="TheListView"          ...         IsGroupingEnabled="True"         GroupDisplayBinding="{Binding Key}">  ...</ListView>

接下来我们必须分组我们的人名单

var data = new List<Person>();for (var i = 0; i < 50; ++i){    data.Add(new Person(NameGenerator.GenRandomFirstName(), NameGenerator.GenRandomLastName(), "ID " + i));}var groupedData =    data.OrderBy(p => p.Lastname)        .GroupBy(p => p.Lastname[0].ToString())        .Select(p => new 观察到的人<string, Person>(p))        .ToList();BindingContext = new ObservableCollection<观察到的人<string, Person>>(groupedData);

通过使用LINQ订购并通过他们的姓氏划分人员,我们有一个快速和拯救的方式来执行此操作。 LINQ将返回列表 Igrouping.。请注意,通过使用第一个字符,我们只会将第一个字母作为密钥。所以现在让我们看看 观察到的人:

public class 观察到的人<S, T> : ObservableCollection<T>{    private readonly S _key;    public 观察到的人(IGrouping<S, T> group)        : base(group)    {        _key = group.Key;    }    public S Key    {        get { return _key; }    }}

继承的原因 观察到 是允许您将项目添加或删除为现有组。从您的电话簿中添加或删除一个人。在我的示例中,密钥将是类型 细绳 并且集合是类型的 Ienumerable.<Person>.

造型标题

与单元格一样,标题也可以通过覆盖数据格式来打造:

<ListView x:Name="TheListView" ItemsSource="{Binding BindingContext}" ItemSelected="TheListViewOnItemSelected"         IsGroupingEnabled="True"         GroupDisplayBinding="{Binding Key}">  <ListView.GroupHeaderTemplate>    <DataTemplate>      <ViewCell>        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"                     BackgroundColor="Navy">          <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">            <Label Text="{Binding Key}" FontSize="Small" TextColor="Lime" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>          </Grid>        </StackLayout>      </ViewCell>    </DataTemplate>  </ListView.GroupHeaderTemplate>  ...</ListView>

是的,我没有设计师,如果你看到这个......;)

启用组导航

从平台到平台的组导航概念不同,但您可以通过绑定它来启用它 groupshortnamebinding. 属性到密钥。

<ListView x:Name="TheListView"         ...         IsGroupingEnabled="True"         GroupDisplayBinding="{Binding Key}"         groupshortnamebinding.="{Binding Key}">  ...</ListView>

仅在iOS和Windows手机上使用组导航,因此请确保在这些平台上测试。正如您将看到每个平台的概念也完全不同。

结论

启用 列表显示 为了显示组中的数据列表真的很简单,可以使用XAML和LINQ非常轻松解决。但要意识到这一点 列表显示 当您下降定制路由时(特别是在iOS上),也可以是一个真正的性能猪。所以尝试坚持默认模板,如果必须使用自定义单元格,请务必遵循 表现提示 由Xamarin.Forms团队提供。

你可以找到这个小项目 GitHub..

Technorati标签: XARMAIN.,Xamarin.Fomrs.,列表显示,Igrouping.

Updated: