第十九章：集合视图（九）

对ListView项目进行分组
有时候，ListView中的项目可以通过某种方式进行分组。 例如，如果项目按字母顺序排列，则可以轻松导航列出用户朋友或联系人姓名的ListView，但如果所有A，B，C等都位于不同的组中，则它更易于导航，
导航到特定组的所有内容都需要一些点击。
ListView支持这种分组和导航。 正如您所发现的，您设置为ListView的ItemsSource属性的对象必须实现IEnumerable。 此IEnumerable对象是项的集合。
将ListView与分组功能一起使用时，设置为ItemsSource的IEnumerable集合包含每个组的一个项目，这些项目本身实现IEnumerable并包含该组中的对象。 换句话说，您将ListView的ItemsSource属性设置为集合的集合。
组类实现IEnumerable的一种简单方法是从List或ObservableCollection派生，具体取决于是否可以动态地将项添加到集合中或从集合中删除。但是，您需要向此类添加一些其他属性：一个属性（通常称为Title）应该是该组的文本描述。另一个属性是用于导航列表的较短文本描述。根据此文本说明在Windows 10 Mobile上的使用方式，您应将此简短文字说明保留为三个字母或更少。
例如，假设您要显示颜色列表，但分为指示主色调（或缺少色调）的组。这里有七个这样的组：灰色，红色，黄色，绿色，青色，蓝色和洋红色。
Xamarin.FormsBook.Toolkit库中的NamedColorGroup类派生自List ，因此是NamedColor对象的集合。它还定义了文本Title和ShortName属性以及ColorShade属性，旨在用作组的类似粉彩的代表颜色：

public class NamedColorGroup : List<NamedColor>
{
    // Instance members.
    private NamedColorGroup(string title, string shortName, Color colorShade)
    {
        this.Title = title;
        this.ShortName = shortName;
        this.ColorShade = colorShade;
    }
    public string Title { private set; get; }
    public string ShortName { private set; get; }
    public Color ColorShade { private set; get; }
    // Static members.
    static NamedColorGroup()
    {
        // Create all the groups.
        List<NamedColorGroup> groups = new List<NamedColorGroup>
        {
            new NamedColorGroup("Grays", "Gry", new Color(0.75, 0.75, 0.75)),
            new NamedColorGroup("Reds", "Red", new Color(1, 0.75, 0.75)),
            new NamedColorGroup("Yellows", "Yel", new Color(1, 1, 0.75)),
            new NamedColorGroup("Greens", "Grn", new Color(0.75, 1, 0.75)),
            new NamedColorGroup("Cyans", "Cyn", new Color(0.75, 1, 1)),
            new NamedColorGroup("Blues", "Blu", new Color(0.75, 0.75, 1)),
            new NamedColorGroup("Magentas", "Mag", new Color(1, 0.75, 1))
        };
        foreach (NamedColor namedColor in NamedColor.All)
        {
            Color color = namedColor.Color;
            int index = 0;
            if (color.Saturation != 0)
            {
                index = 1 + (int)((12 * color.Hue + 1) / 2) % 6;
            }
            groups[index].Add(namedColor);
        }
        foreach (NamedColorGroup group in groups)
        {
            group.TrimExcess();
        }
        All = groups;
    }
    public static IList<NamedColorGroup> All { private set; get; }
}

静态构造函数汇编七个NamedColorGroup实例，并将静态All属性设置为这七个对象的集合。
ColorGroupList程序将此新类用于其ListView。 请注意，ItemsSource设置为NamedColorGroup.All（七个项目的集合）而不是NamedColor.All（147个项目的集合）。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit=
                 "clr-namespace:Xamarin.FormsBook.Toolkit;assembly=Xamarin.FormsBook.Toolkit"
             x:Class="ColorGroupList.ColorGroupListPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="10, 20, 10, 0"
                    Android="10, 0"
                    WinPhone="10, 0" />
    </ContentPage.Padding>
    <ListView ItemsSource="{x:Static toolkit:NamedColorGroup.All}"
              IsGroupingEnabled="True"
              GroupDisplayBinding="{Binding Title}"
              GroupShortNameBinding="{Binding ShortName}">
        <ListView.RowHeight>
            <OnPlatform x:TypeArguments="x:Int32"
                        iOS="80"
                        Android="80"
                        WinPhone="90" />
        </ListView.RowHeight>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ContentView Padding="5">
                        <Frame OutlineColor="Accent"
                               Padding="10">
                            <StackLayout Orientation="Horizontal">
                                <BoxView x:Name="boxView"
                                         Color="{Binding Color}"
                                         WidthRequest="50"
                                         HeightRequest="50" />
                                <StackLayout>
                                    <Label Text="{Binding FriendlyName}"
                                           FontSize="22"
                                           VerticalOptions="StartAndExpand" />
                                    <Label Text="{Binding RgbDisplay, StringFormat='RGB = {0}'}"
                                           FontSize="16"
                                           VerticalOptions="CenterAndExpand" />
                                </StackLayout>
                            </StackLayout>
                        </Frame>
                    </ContentView>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

将IsGroupingEnabled设置为True非常重要。 删除它（以及ItemTemplate设置），ListView显示由完全限定类名“Xamarin.FormsBook.Toolkit.NamedColorGroup”标识的七个项目。
GroupDisplayBinding属性是引用组项中属性名称的Binding，其中包含组的标题或标题。 这将显示在ListView中以标识每个组：

GroupShortNameBinding属性绑定到组对象中的另一个属性，该属性显示标题的精简版本。如果组标题只是字母A，B，C等，则可以对短名称使用相同的属性。
在iPhone屏幕上，您可以在屏幕右侧看到短名称。在iOS术语中，这称为列表的索引，并且点击一个移动到列表的该部分。
在Windows 10 Mobile屏幕上，标题错误地使用ShortName而不是Title属性。点击标题会转到导航屏幕（称为跳转列表），其中所有短名称都排列在网格中。点击一个回到ListView，屏幕顶部有相应的标题。
Android没有提供导航功能。
尽管ListView现在实际上是NamedColorGroup对象的集合，但SelectedItem仍然是NamedColor对象。
通常，如果ItemSelected处理程序需要确定所选项的组，则可以通过访问ItemsSource属性的集合集并使用List定义的Find方法之一来“手动”执行此操作。或者，您可以在每个项目中存储组标识符。 Tapped处理程序提供组和项目。