第十九章：集合視圖（九）

對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處理程式提供組和項目。