:::no-loc(Xamarin.Forms)::: CollectionView グループ化:::no-loc(Xamarin.Forms)::: CollectionView Grouping
サンプルのダウンロード
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 typebool
, indicates whether the underlying data should be displayed in groups. このプロパティの既定値はfalse
です。The default value of this property isfalse
.GroupHeaderTemplate
型のDataTemplate
。各グループのヘッダーに使用するテンプレート。GroupHeaderTemplate
, of typeDataTemplate
, the template to use for the header of each group.GroupFooterTemplate
型のDataTemplate
。各グループのフッターに使用するテンプレート。GroupFooterTemplate
, of typeDataTemplate
, 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
グループに属する項目を定義するコレクション。AnIEnumerable
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 anIEnumerable<T>
collection, whereT
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 theIEnumerable<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.