Xamarin.Forms CollectionView のグループ化

Download Sample サンプルをダウンロードします

大量のデータ セットは、頻繁にスクロールリストに表示されると扱いにくい場合があります。 このシナリオでは、データをグループにまとめることで、データ間の移動が容易になり、ユーザー エクスペリエンスが向上します。

CollectionView は、グループ化されたデータの表示をサポートし、表示方法を制御する次のプロパティを定義します。

  • IsGroupedの型 boolは、基になるデータをグループに表示するかどうかを示します。 このプロパティの既定値は false です。
  • GroupHeaderTemplate、型 DataTemplate、各グループのヘッダーに使用するテンプレート。
  • GroupFooterTemplate、型 DataTemplate、各グループのフッターに使用するテンプレート。

これらのプロパティはオブジェクトによって BindableProperty サポートされます。つまり、プロパティはデータ バインディングのターゲットにすることができます。

次のスクリーンショットは、グループ化されたデータが CollectionView 表示されていることを示しています。

Screenshot of a grouped data in a CollectionView, on iOS and Android

データ テンプレートの詳細については、「Xamarin.Forms のデータ テンプレート」を参照してください。

データをグループ化する

データは、表示する前にグループ化する必要があります。 これは、各グループが項目のリストであるグループのリストを作成することによって実現できます。 グループの一覧はコレクションである IEnumerable<T> 必要があります。コレクションでは T 、次の 2 つのデータが定義されます。

  • グループ名。
  • IEnumerableグループに属する項目を定義するコレクション。

したがって、データをグループ化するプロセスは次のとおりです。

  • 1 つの項目をモデル化する型を作成します。
  • 1 つの項目グループをモデル化する型を作成します。
  • 1 つの項目グループを IEnumerable<T> モデル化する型であるコレクション T を作成します。 したがって、このコレクションは、グループ化されたデータを格納するグループのコレクションです。
  • コレクションにデータを追加します IEnumerable<T>

データをグループ化する場合の最初の手順は、1 つの項目をモデル化する型を作成することです。 次の例は、サンプル アプリケーションの Animal クラスを示しています。

public class Animal
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string Details { get; set; }
    public string ImageUrl { get; set; }
}

このクラスは Animal 、1 つの項目をモデル化します。 その後、項目のグループをモデル化する型を作成できます。 次の例は、サンプル アプリケーションの AnimalGroup クラスを示しています。

public class AnimalGroup : List<Animal>
{
    public string Name { get; private set; }

    public AnimalGroup(string name, List<Animal> animals) : base(animals)
    {
        Name = name;
    }
}

クラスは AnimalGroup クラスを List<T> 継承し、グループ名を Name 表すプロパティを追加します。

IEnumerable<T>その後、グループのコレクションを作成できます。

public List<AnimalGroup> Animals { get; private set; } = new List<AnimalGroup>();

このコードでは、コレクション内の各項目がオブジェクトである、という名前 Animalsのコレクションを AnimalGroup 定義します。 各AnimalGroupオブジェクトは、名前と、グループ内のオブジェクトをList<Animal>Animal定義するコレクションで構成されます。

その後、グループ化されたデータをコレクションに Animals 追加できます。

Animals.Add(new AnimalGroup("Bears", new List<Animal>
{
    new Animal
    {
        Name = "American Black Bear",
        Location = "North America",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
    },
    new Animal
    {
        Name = "Asian Black Bear",
        Location = "Asia",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
    },
    // ...
}));

Animals.Add(new AnimalGroup("Monkeys", new List<Animal>
{
    new Animal
    {
        Name = "Baboon",
        Location = "Africa & Asia",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
    },
    new Animal
    {
        Name = "Capuchin Monkey",
        Location = "Central & South America",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
    },
    new Animal
    {
        Name = "Blue Monkey",
        Location = "Central and East Africa",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
    },
    // ...
}));

このコードは、コレクション内に 2 つのグループを Animals 作成します。 1 つ目 AnimalGroup は名前が付けられ Bears、クマの List<Animal> 詳細のコレクションが含まれています。 2 つ目 AnimalGroup は名前が付けられ Monkeys、サルの List<Animal> 詳細のコレクションが含まれています。

グループ化されたデータを表示する

CollectionViewプロパティtrueを次のように設定することで、データが正しくグループ化されている場合は、グループ化されたデータがIsGrouped表示されます。

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                ...
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    IsGrouped = true
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
// ...

内の各項目 CollectionView の外観は、プロパティを CollectionView.ItemTemplate a に DataTemplate設定することによって定義されます。 詳細については、「アイテムの 外観を定義する」を参照してください。

注意

既定では、 CollectionView グループヘッダーとフッターにグループ名が表示されます。 この動作は、グループ ヘッダーとグループ フッターをカスタマイズすることで変更できます。

グループ ヘッダーをカスタマイズする

各グループ ヘッダーの外観は、プロパティDataTemplateCollectionView.GroupHeaderTemplate次のように設定することでカスタマイズできます。

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true">
    ...
    <CollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <Label Text="{Binding Name}"
                   BackgroundColor="LightGray"
                   FontSize="Large"
                   FontAttributes="Bold" />
        </DataTemplate>
    </CollectionView.GroupHeaderTemplate>
</CollectionView>

この例では、各グループ ヘッダーは、グループ名を表示する A Label に設定され、他の外観プロパティが設定されています。 次のスクリーンショットは、カスタマイズされたグループ ヘッダーを示しています。

Screenshot of a customized group header in a CollectionView, on iOS and Android

各グループ フッターの外観は、プロパティDataTemplateCollectionView.GroupFooterTemplate次のように設定することでカスタマイズできます。

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true">
    ...
    <CollectionView.GroupFooterTemplate>
        <DataTemplate>
            <Label Text="{Binding Count, StringFormat='Total animals: {0:D}'}"
                   Margin="0,0,0,10" />
        </DataTemplate>
    </CollectionView.GroupFooterTemplate>
</CollectionView>

この例では、各グループ フッターは、 Label グループ内の項目の数を表示する a に設定されています。 次のスクリーンショットは、カスタマイズされたグループ フッターを示しています。

Screenshot of a customized group footer in a CollectionView, on iOS and Android

空のグループ

CollectionViewグループ化されたデータが表示されると、空のグループが表示されます。 このようなグループは、グループヘッダーとフッターと共に表示され、グループが空であることを示します。 次のスクリーンショットは、空のグループを示しています。

Screenshot of an empty group in a CollectionView, on iOS and Android

注意

iOS 10 以下では、空のグループのグループ ヘッダーとフッターがすべて上部に CollectionView表示される場合があります。

テンプレートを使用しないグループ化

CollectionViewプロパティを次のように設定せずに、正しくグループ化されたデータをCollectionView.ItemTemplateDataTemplate表示できます。

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true" />

このシナリオでは、1 つの項目をモデル化する ToString 型のメソッドと、1 つの項目グループをモデル化する型をオーバーライドすることで、意味のあるデータを表示できます。