Xamarin.Forms Seskupování objektu CollectionView

Stažení ukázky

Velké datové sady mohou být často nepřesné, když se prezentují v neustále se 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 navigaci v datech.

CollectionView podporuje zobrazení seskupených dat a definuje následující vlastnosti, které řídí způsob jejich zobrazení:

• IsGroupedtyp bool určuje, jestli se mají podkladová data zobrazit ve skupinách. Výchozí hodnota této vlastnosti je false .
• GroupHeaderTemplate, typu DataTemplate , šablony, která se má použít pro hlavičku každé skupiny.
• GroupFooterTemplate, typu DataTemplate , šablony, která se má použít pro zápatí každé skupiny.

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

Následující snímky obrazovky zobrazují CollectionView seskupená data:

Snímek obrazovky se seskupenou daty v

Další informace o šablonách dat najdete v tématu Xamarin.Forms Data Templates .

Seskupení dat

Data musí být před zobrazením seskupena. Toho lze dosáhnout 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.
• Kolekce, IEnumerable která definuje položky patřící do skupiny.

Proces seskupení dat je proto následující:

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

Příklad

Prvním krokem při seskupování dat je vytvoření typu, který modeluje jednu položku. Následující příklad ukazuje třídu Animal 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; }
}

Třída Animal modelovat jednu položku. Pak je možné vytvořit typ, který modelovat skupinu položek. Následující příklad ukazuje třídu AnimalGroup 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;
    }
}

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

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

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 se skládá z názvu a List<Animal> kolekce, která definuje Animal objekty ve skupině.

Seskupená data je pak možné 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ě Animals skupiny. První má AnimalGroup název a obsahuje kolekci podrobností o BearsList<Animal> medvědech. Druhý má AnimalGroup název a obsahuje kolekci MonkeysList<Animal> detailů o šátcích.

Zobrazení seskupených dat

CollectionView zobrazí seskupená data, pokud jsou data správně seskupená, 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# je:

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

Vzhled každé položky v objektu je definován nastavením vlastnosti CollectionView Xamarin_Forms CollectionView _ItemsView_ItemTemplate" data-linktype="absolute-path">CollectionView.ItemTemplate na DataTemplate . Další informace najdete v tématu Definování vzhledu položky.

Přizpůsobení záhlaví skupiny

Vzhled každé záhlaví skupiny 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á hlavička skupiny nastavená na , která zobrazuje název skupiny a má nastavené Label další vlastnosti vzhledu. Následující snímky obrazovky ukazují přizpůsobenou hlavičku skupiny:

Snímek obrazovky s přizpůsobenou hlavičkou skupiny vCollectionView s

Přizpůsobení zápatí skupiny

Vzhled zápatí každé skupiny můžete 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 , která zobrazuje počet Label položek ve skupině. Následující snímky obrazovky ukazují přizpůsobené zápatí skupiny:

Snímek obrazovky s vlastním zápatím skupiny v

Prázdné skupiny

Když objekt CollectionView zobrazí seskupená data, zobrazí všechny skupiny, které jsou prázdné. Tyto skupiny se zobrazí se záhlavím a zápatím skupiny, které značí, že je skupina prázdná. Na následujících snímcích obrazovky je prázdná skupina:

Snímek obrazovky s prázdnou skupinou vAndroiduzobrazování kolekce

Seskupení bez šablon

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

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

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

Související odkazy

• CollectionView (ukázka)
• Xamarin.Forms Data Templates