:::no-loc(Xamarin.Forms)::: CollectionView グループ化:::no-loc(Xamarin.Forms)::: CollectionView Grouping

09/17/2019

サンプルのダウンロード Download Sample Download the sample

多くの場合、頻繁にスクロールするリストに表示すると、大きなデータセットが扱いにくくなる可能性があります。Large data sets can often become unwieldy when presented in a continually scrolling list. このシナリオでは、データをグループにまとめると、データの移動が容易になるため、ユーザーエクスペリエンスが向上します。In this scenario, organizing the data into groups can improve the user experience by making it easier to navigate the data.

CollectionView グループ化されたデータの表示をサポートし、表示方法を制御する次のプロパティを定義します。CollectionView supports displaying grouped data, and defines the following properties that control how it will be presented:

IsGrouped型のは、 bool 基になるデータをグループに表示するかどうかを示します。IsGrouped, of type bool, indicates whether the underlying data should be displayed in groups. このプロパティの既定値は false です。The default value of this property is false.
GroupHeaderTemplate型の DataTemplate 。各グループのヘッダーに使用するテンプレート。GroupHeaderTemplate, of type DataTemplate, the template to use for the header of each group.
GroupFooterTemplate型の DataTemplate 。各グループのフッターに使用するテンプレート。GroupFooterTemplate, of type DataTemplate, the template to use for the footer of each group.

これらのプロパティは、オブジェクトによって支えられてい BindableProperty ます。これは、プロパティをデータバインディングのターゲットにできることを意味します。These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

次のスクリーンショットは、グループ化されたデータの表示を示してい CollectionView ます。The following screenshots show a CollectionView displaying grouped data:

データテンプレートの詳細については、「:::no-loc(Xamarin.Forms)::: のデータテンプレート」を参照してください。For more information about data templates, see :::no-loc(Xamarin.Forms)::: Data Templates.

データのグループ化Group data

データは、表示する前にグループ化する必要があります。Data must be grouped before it can be displayed. これを行うには、グループの一覧を作成します。各グループは項目のリストです。This can be accomplished by creating a list of groups, where each group is a list of items. グループの一覧はコレクションである必要があり IEnumerable<T> ます。ここで、は T 2 つのデータを定義します。The list of groups should be an IEnumerable<T> collection, where T defines two pieces of data:

グループ名。A group name.
IEnumerableグループに属する項目を定義するコレクション。An IEnumerable collection that defines the items belonging to the group.

このため、データをグループ化するプロセスは次のようになります。The process for grouping data, therefore, is to:

1つの項目をモデル化する型を作成します。Create a type that models a single item.
項目の1つのグループをモデル化する型を作成します。Create a type that models a single group of items.
IEnumerable<T>コレクションを作成し T ます。は、単一の項目グループをモデル化する型です。Create an IEnumerable<T> collection, where T is the type that models a single group of items. このコレクションは、グループ化されたデータを格納するグループのコレクションです。This collection is therefore a collection of groups, which stores the grouped data.
コレクションにデータを追加 IEnumerable<T> します。Add data to the IEnumerable<T> collection.

例Example

データをグループ化する場合の最初の手順は、1つの項目をモデル化する型を作成することです。When grouping data, the first step is to create a type that models a single item. 次の例は、サンプルアプリケーションのクラスを示してい Animal ます。The following example shows the Animal class from the sample application:

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 つの項目をモデル化します。The Animal class models a single item. その後、項目のグループをモデル化する型を作成できます。A type that models a group of items can then be created. 次の例は、サンプルアプリケーションのクラスを示してい AnimalGroup ます。The following example shows the AnimalGroup class from the sample application:

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 グループ名を表すプロパティを追加します。The AnimalGroup class inherits from the List<T> class and adds a Name property that represents the group name.

次に、 IEnumerable<T> グループのコレクションを作成できます。An IEnumerable<T> collection of groups can then be created:

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

このコード Animals は、コレクション内の各項目がオブジェクトであるという名前のコレクションを定義し AnimalGroup ます。This code defines a collection named Animals, where each item in the collection is an AnimalGroup object. 各 AnimalGroup オブジェクトは、名前と、 List<Animal> グループ内のオブジェクトを定義するコレクションで構成され Animal ます。Each AnimalGroup object comprises a name, and a List<Animal> collection that defines the Animal objects in the group.

次に、グループ化されたデータをコレクションに追加でき Animals ます。Grouped data can then be added to the Animals collection:

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 れます。This code creates two groups in the Animals collection. 1つ目 AnimalGroup はという名前 Bears で、詳細なコレクションが含まれてい List<Animal> ます。The first AnimalGroup is named Bears, and contains a List<Animal> collection of bear details. 2番目の AnimalGroup はという名前 Monkeys で、 List<Animal> サルの詳細のコレクションが含まれています。The second AnimalGroup is named Monkeys, and contains a List<Animal> collection of monkey details.

グループ化されたデータの表示Display grouped data

CollectionView データが正しくグループ化されている場合は、プロパティをに設定して、グループ化されたデータを表示し IsGrouped true ます。CollectionView will display grouped data, provided that the data has been grouped correctly, by setting the IsGrouped property to true:

<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# コードを次に示します。The equivalent C# code is:

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

の各項目の外観は、 CollectionView プロパティをに設定することによって定義され CollectionView.ItemTemplate DataTemplate ます。The appearance of each item in the CollectionView is defined by setting the CollectionView.ItemTemplate property to a DataTemplate. 詳細については、「アイテムの外観を定義する」を参照してください。For more information, see Define item appearance.

注意

既定では、グループの CollectionView ヘッダーとフッターにグループ名が表示されます。By default, CollectionView will display the group name in the group header and footer. この動作は、グループヘッダーとグループフッターをカスタマイズすることによって変更できます。This behavior can be changed by customizing the group header and group footer.

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

各グループヘッダーの外観は、プロパティをに設定することによってカスタマイズでき CollectionView.GroupHeaderTemplate DataTemplate ます。The appearance of each group header can be customized by setting the CollectionView.GroupHeaderTemplate property to a DataTemplate:

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

この例では、各グループヘッダーは、グループ名を表示するに設定され、その Label 他の外観プロパティが設定されています。In this example, each group header is set to a Label that displays the group name, and that has other appearance properties set. 次のスクリーンショットは、カスタマイズされたグループヘッダーを示しています。The following screenshots show the customized group header:

グループフッターをカスタマイズするCustomize the group footer

各グループフッターの外観は、プロパティをに設定することによってカスタマイズでき CollectionView.GroupFooterTemplate DataTemplate ます。The appearance of each group footer can be customized by setting the CollectionView.GroupFooterTemplate property to a DataTemplate:

<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 ています。In this example, each group footer is set to a Label that displays the number of items in the group. 次のスクリーンショットは、カスタマイズされたグループフッターを示しています。The following screenshots show the customized group footer:

空のグループEmpty groups

に CollectionView グループ化されたデータが表示されると、空のグループが表示されます。When a CollectionView displays grouped data, it will display any groups that are empty. このようなグループは、グループのヘッダーとフッターと共に表示され、グループが空であることを示します。Such groups will be displayed with a group header and footer, indicating that the group is empty. 次のスクリーンショットは、空のグループを示しています。The following screenshots show an empty group:

注意

IOS 10 以降では、空のグループのグループヘッダーとグループフッターがの先頭に表示されることがあり CollectionView ます。On iOS 10 and lower, group headers and footers for empty groups may all be displayed at the top of the CollectionView.

テンプレートのないグループGroup without templates

CollectionView プロパティをに設定せずに、正しくグループ化されたデータを表示でき CollectionView.ItemTemplate DataTemplate ます。CollectionView can display correctly grouped data without setting the CollectionView.ItemTemplate property to a DataTemplate:

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

このシナリオでは、1つの項目をモデル化する型のメソッドをオーバーライドすることによって意味のあるデータを表示 ToString し、単一の項目グループをモデル化する型を表示できます。In this scenario, meaningful data can be displayed by overriding the ToString method in the type that models a single item, and the type that models a single group of items.

:::no-loc(Xamarin.Forms)::: CollectionView グループ化:::no-loc(Xamarin.Forms)::: CollectionView Grouping

データのグループ化Group data

例Example

グループ化されたデータの表示Display grouped data

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

グループフッターをカスタマイズするCustomize the group footer

空のグループEmpty groups

テンプレートのないグループGroup without templates

このページはお役に立ちましたか?

フィードバック

このページはお役に立ちましたか?

:::no-loc(Xamarin.Forms)::: CollectionView グループ化:::no-loc(Xamarin.Forms)::: CollectionView Grouping

データのグループ化Group data

例Example

グループ化されたデータの表示Display grouped data

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

グループフッターをカスタマイズするCustomize the group footer

空のグループEmpty groups

テンプレートのないグループGroup without templates

関連リンクRelated links

このページはお役に立ちましたか?

フィードバック

このページはお役に立ちましたか?