Xamarin.Forms Seskupení CollectionView

Ukázka stažení Stažení ukázky

Velké sady dat se často můžou nepraktický, když se prezentují v seznamu nepřetržitého posouvání. V tomto scénáři může uspořádání dat do skupin zlepšit uživatelské prostředí tím, že usnadňuje procházení dat.

CollectionView podporuje zobrazování seskupených dat a definuje následující vlastnosti, které určují, jak bude prezentována:

  • IsGroupedtyp bool Určuje, zda mají být zdrojová data zobrazena ve skupinách. Výchozí hodnota této vlastnosti je false .
  • GroupHeaderTemplate, typu DataTemplate , šablonu, která se má použít pro záhlaví každé skupiny.
  • GroupFooterTemplatetyp DataTemplate šablony, která má být použita pro zápatí každé skupiny.

Tyto vlastnosti jsou zálohovány BindableProperty objekty, což znamená, že vlastnosti mohou být cílem datových vazeb.

Na následujících snímcích obrazovky se zobrazuje CollectionView seskupená data:

dat nasnímku seskupených dat v CollectionView v systémech iOS a Android

Další informace o datových šablonách naleznete v tématu Xamarin.Forms Data Templates .

Seskupit data

Data musí být seskupena, aby je bylo možné zobrazit. To lze provést vytvořením seznamu skupin, kde každá skupina je seznam položek. Seznam skupin by měl být IEnumerable<T> kolekce, kde T definuje dvě části dat:

  • Název skupiny.
  • IEnumerableKolekce definující položky patřící do skupiny

Proces pro seskupování dat proto představuje:

  • Vytvoří typ, který modeluje jednu položku.
  • Vytvořte typ, který modeluje jednu skupinu položek.
  • Vytvořte IEnumerable<T> kolekci, kde T je typ, který modeluje jednu skupinu položek. Tato kolekce je proto kolekcí skupin, která ukládá seskupená data.
  • Přidejte data do IEnumerable<T> kolekce.

Příklad

Při seskupování dat je prvním krokem vytvoření typu, který modeluje jednu položku. Následující příklad ukazuje Animal třídu z ukázkové aplikace:

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

AnimalTřída modeluje jednu položku. Typ, který vytváří model skupiny položek, lze vytvořit. Následující příklad ukazuje AnimalGroup třídu z ukázkové aplikace:

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

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

AnimalGroupTřída dědí z List<T> třídy a přidá Name vlastnost, která představuje název skupiny.

IEnumerable<T>Kolekci skupin je možné vytvořit:

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

Tento kód definuje kolekci s názvem Animals , kde každá položka v kolekci je AnimalGroup objekt. Každý AnimalGroup objekt obsahuje název a List<Animal> kolekci definující Animal objekty ve skupině.

Seskupená data se pak dají přidat do Animals kolekce:

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"
    },
    // ...
}));

Tento kód vytvoří v kolekci dvě skupiny Animals . První AnimalGroup má název Bears a obsahuje List<Animal> kolekci details. Druhý AnimalGroup má název Monkeys a obsahuje List<Animal> kolekci podrobností o opice.

Zobrazit seskupená data

CollectionView zobrazí seskupená data, za předpokladu, že se data správně seskupují, nastavením IsGrouped vlastnosti na 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>

Ekvivalentní kód jazyka C#:

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

Vzhled každé položky v CollectionView je definován nastavením CollectionView Xamarin_Forms _ItemsView_ItemTemplate "data-LINKTYPE =" absolutní cesta ">CollectionView.ItemTemplate vlastnosti na DataTemplate . Další informace najdete v tématu definice vzhledu položky.

Poznámka

Ve výchozím nastavení CollectionView zobrazí název skupiny v záhlaví a zápatí skupiny. Toto chování lze změnit přizpůsobením záhlaví skupiny a zápatí skupiny.

Přizpůsobení záhlaví skupiny

Vzhled jednotlivých záhlaví skupin lze přizpůsobit nastavením CollectionView.GroupHeaderTemplate vlastnosti na DataTemplate :

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

V tomto příkladu je každé záhlaví skupiny nastavené na hodnotu Label , která zobrazuje název skupiny a má nastavené jiné vlastnosti vzhledu. Následující snímky obrazovky ukazují záhlaví přizpůsobené skupiny:

Snímek obrazovky s přizpůsobenou hlavičkou skupiny v CollectionView, v iOS a Androidem v

Vzhled jednotlivých zápatí skupin lze přizpůsobit nastavením CollectionView.GroupFooterTemplate vlastnosti na 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>

V tomto příkladu je každé zápatí skupiny nastavené na hodnotu Label , která zobrazuje počet položek ve skupině. Na následujících snímcích obrazovky se zobrazuje zápatí přizpůsobené skupiny:

Snímek obrazovky zápatím skupin v přizpůsobenémzápatí skupiny v CollectionView v systémech iOS a Android CollectionView

Prázdné skupiny

Když se CollectionView zobrazí seskupená data, zobrazí se všechny skupiny, které jsou prázdné. Tyto skupiny se zobrazí s záhlavím a zápatím skupiny, což značí, že je skupina prázdná. Následující snímky obrazovky ukazují prázdnou skupinu:

snímku skupiny prázdné skupiny v CollectionView v systémech iOS a Android

Poznámka

V systému iOS 10 a nižších se můžou záhlaví skupin a zápatí pro prázdné skupiny zobrazit v horní části okna CollectionView .

Seskupit bez šablon

CollectionViewmůže zobrazit správně seskupená data bez nastavení CollectionView Xamarin_Forms _ItemsView_ItemTemplate "data-LINKTYPE =" absolutní cesta ">CollectionView.ItemTemplate vlastnost na DataTemplate :

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

V tomto scénáři lze smysluplná data zobrazit přepsáním ToString metody v typu, který modeluje jednu položku, a typem, který modeluje jednu skupinu položek.