Xamarin.Forms CollectionView グループ化

[アーティクル]
12/16/2021

サンプルのダウンロードサンプルをダウンロードする

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

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

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

これらのプロパティは、オブジェクトによって支えられてい BindableProperty ます。これは、プロパティをデータバインディングのターゲットにできることを意味します。

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

グループ化されCollectionView でのグループ化されたデータのスクリーンショット、iOS および Android

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

データのグループ化

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

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

このため、データをグループ化するプロセスは次のようになります。

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 データが正しくグループ化されている場合は、プロパティをに設定して、グループ化されたデータを表示し IsGroupedtrue ます。

<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 Xamarin_Forms _ItemsView_ItemTemplate "linktype =" 絶対パス ">プロパティをに設定することによって定義され CollectionView.ItemTemplateDataTemplate ます。詳細については、「アイテムの外観を定義する」を参照してください。

注意

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

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

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

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

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

カスタマイズされたグループヘッダーをCollectionView でのカスタマイズされたグループヘッダーのスクリーンショット、iOS および Android

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

各グループフッターの外観は、プロパティをに設定することによってカスタマイズでき CollectionView.GroupFooterTemplateDataTemplate ます。

<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 ています。次のスクリーンショットは、カスタマイズされたグループフッターを示しています。

カスタマイズされたグループフッターをCollectionView でのカスタマイズされたグループフッターのスクリーンショット、iOS と Android CollectionView、

空のグループ

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

CollectionView 内の空のグループの空のグループのスクリーンショットが空のグループの CollectionView で、iOS と Android が空のグループの場合

注意

IOS 10 以降では、空のグループのグループヘッダーとグループフッターがの先頭に表示されることがあり CollectionView ます。

テンプレートのないグループ

CollectionViewでは、 CollectionView Xamarin_Forms _ItemsView_ItemTemplate "linktype =" 絶対パス ">CollectionView.ItemTemplate プロパティをに設定しなくても、適切にグループ化されたデータを表示でき DataTemplate ます。

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

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