Xamarin.Forms CollectionView のグループ化
サンプルのダウンロード大きなデータ セットは、多くの場合、スクロールリストに表示されると扱いにくくなる可能性があります。 このシナリオでは、データをグループにまとめることで、データ間の移動が容易になり、ユーザー エクスペリエンスが向上します。
CollectionView は、グループ化されたデータの表示をサポートし、表示方法を制御する次のプロパティを定義します。
IsGrouped型boolの 。 は、基になるデータをグループに表示するかどうかを示します。 このプロパティの既定値はfalseです。GroupHeaderTemplate型DataTemplateの 。各グループのヘッダーに使用するテンプレート。GroupFooterTemplateの型DataTemplate。各グループのフッターに使用するテンプレート。
これらのプロパティはオブジェクトによって BindableProperty サポートされます。つまり、プロパティはデータ バインディングのターゲットにすることができます。
次のスクリーンショットは、グループ化されたデータが CollectionView 表示されていることを示しています。
データ テンプレートの詳細については、「Xamarin.Forms のデータ テンプレート」を参照してください。
データをグループ化する
表示する前に、データをグループ化する必要があります。 これは、各グループが項目のリストであるグループのリストを作成することによって実現できます。 グループの一覧はコレクションである IEnumerable<T> 必要があります。ここで T 、次の 2 つのデータが定義されます。
- グループ名。
IEnumerableグループに属する項目を定義するコレクション。
そのため、データをグループ化するプロセスは次のとおりです。
- 1 つの項目をモデル化する型を作成します。
- 1 つの項目グループをモデル化する型を作成します。
- コレクションを作成します
IEnumerable<T>。ここでT、 は 1 つの項目グループをモデル化する型です。 したがって、このコレクションはグループ化されたデータを格納するグループのコレクションです。 - コレクションにデータを追加します
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.ItemTemplate に DataTemplate設定することによって定義されます。 詳細については、「アイテムの 外観を定義する」を参照してください。
注意
既定では、 CollectionView グループヘッダーとフッターにグループ名が表示されます。 この動作は、グループ ヘッダーとグループ フッターをカスタマイズすることで変更できます。
グループ ヘッダーをカスタマイズする
各グループ ヘッダーの外観は、 プロパティを CollectionView.GroupHeaderTemplate に 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 表示し、他の外観プロパティが設定されている に設定されています。 次のスクリーンショットは、カスタマイズされたグループ ヘッダーを示しています。
グループ フッターをカスタマイズする
各グループ フッターの外観は、 プロパティを CollectionView.GroupFooterTemplate に 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 内の項目数を表示する に設定されています。 次のスクリーンショットは、カスタマイズされたグループ フッターを示しています。
空のグループ
CollectionViewにグループ化されたデータが表示されると、空のグループが表示されます。 このようなグループは、グループヘッダーとフッターと共に表示され、グループが空であることを示します。 次のスクリーンショットは、空のグループを示しています。
注意
iOS 10 以前では、空のグループのグループ ヘッダーとフッターがすべて の CollectionView上部に表示される場合があります。
テンプレートのないグループ化
CollectionView プロパティを に設定 CollectionView.ItemTemplate せずに、正しくグループ化されたデータを DataTemplate表示できます。
<CollectionView ItemsSource="{Binding Animals}"
IsGrouped="true" />
このシナリオでは、1 つの項目をモデル化する ToString 型の メソッドと、1 つの項目グループをモデル化する型をオーバーライドすることで、意味のあるデータを表示できます。