Xamarin.Forms CollectionView Gruplama

Örneği indirme

Sürekli kayan bir listede sunulan büyük veri kümeleri genellikle daha fazla kullanılamaz hale geldi. Bu senaryoda verileri gruplar halinde düzenlemek, verilerde gezinmeyi kolaylaştırarak kullanıcı deneyimini geliştirebilirsiniz.

CollectionView , grup veri görüntülemeyi destekler ve nasıl sun olacağını kontrol eden aşağıdaki özellikleri tanımlar:

• IsGroupedtürü, bool temel alınan verilerin gruplarda görüntülendiğinden emin olduğunu gösterir. Bu özelliğin varsayılan değeri false olur.
• GroupHeaderTemplate, DataTemplate türü, her grubun üst bilgisi için kullanmak üzere şablon.
• GroupFooterTemplate, DataTemplate türü, her grubun alt bilgisinde kullanmak üzere şablon.

Bu özellikler nesnelerle BindableProperty desteklene, bu da özelliklerin veri bağlamalarının hedefi olduğu anlamına gelir.

Aşağıdaki ekran görüntüleri, grup CollectionView veri görüntülemeyi gösterir:

iOS vegrup verilerle grup oluşturulan verilerin Android CollectionView

Veri şablonları hakkında daha fazla bilgi için bkz. Xamarin.Forms Data Templates .

Verileri grupla

Verilerin görüntülenmeden önce grup olması gerekir. Bu, her grubun bir öğe listesi olduğu bir grup listesi oluşturarak gerçek olabilir. Grup listesi, iki veri IEnumerable<T> parçasının T tanımladığı bir koleksiyon olması gerekir:

• Grup adı.
• IEnumerableGruba ait öğeleri tanımlayan bir koleksiyon.

Bu nedenle verileri gruplama işlemi şu şekildedir:

• Tek bir öğeyi modelleten bir tür oluşturun.
• Tek bir öğe grubunu modeller bir tür oluşturun.
• Tek IEnumerable<T> bir öğe grubunu T modeller türü olan bir koleksiyon oluşturun. Bu nedenle bu koleksiyon, grup halindeki verileri depolar.
• Koleksiyona veri IEnumerable<T> ekleyin.

Örnek

Verileri gruplamanın ilk adımı tek bir öğeyi modelleten bir tür oluşturmaktır. Aşağıdaki örnek, örnek Animal uygulamanın sınıfını gösterir:

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

sınıfı Animal tek bir öğeyi modeller. Daha sonra bir öğe grubunu modeller bir tür oluşturulabilir. Aşağıdaki örnek, örnek AnimalGroup uygulamanın sınıfını gösterir:

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

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

sınıfı AnimalGroup sınıfından List<T> devralınır ve grup Name adını temsil eden bir özellik ekler.

Daha IEnumerable<T> sonra bir grup koleksiyonu oluşturulabilir:

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

Bu kod, koleksiyonda her Animals öğenin bir nesne olduğu adlı bir koleksiyon AnimalGroup tanımlar. Her AnimalGroup nesne bir ad ve List<Animal> gruptaki nesneleri tanımlayan bir Animal koleksiyondan oluşur.

Grup eklenmiş veriler daha sonra koleksiyona Animals eklenebilir:

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

Bu kod, koleksiyonda iki grup Animals oluşturur. İlki AnimalGroup olarak adlandırılmış ve bir ayı ayrıntıları koleksiyonu BearsList<Animal> içerir. İkincisi AnimalGroup olarak adlandırılmış ve Monkeys maymun ayrıntıları List<Animal> koleksiyonu içerir.

Grup verilerini görüntüleme

CollectionView özelliği olarak ayarlanacak şekilde, verilerin doğru şekilde gruplandıysa gruplanmıştır IsGrouped verileri true görüntüler:

<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>

Eşdeğer C# kodu şöyledir:

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

öğesinde her öğenin CollectionView görünümü, Xamarin_Forms CollectionView _ItemsView_ItemTemplate" data-linktype="absolute-path">özelliği olarak ayarlandığı CollectionView.ItemTemplate şekilde DataTemplate tanımlanır. Daha fazla bilgi için bkz. Öğe görünümünü tanımlama.

Grup üst bilgilerini özelleştirme

Her grup başlığının görünümü, özelliği bir olarak CollectionView.GroupHeaderTemplate ayarlarak DataTemplate özelleştirilebilir:

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

Bu örnekte, her grup üst bilgisi grup adını görüntüleyen ve başka görünüm özellikleri ayarlanmış Label bir olarak ayarlanmıştır. Aşağıdaki ekran görüntüleri özelleştirilmiş grup üst bilgilerini gösterir:

Özelleştirilmiş grup üst bilgisi ile iOS veözelleştirilmiş grup üst bilgisi

Grup alt bilginizi özelleştirme

Her grubun alt bilgi görünümünü, özelliğini bir olarak CollectionView.GroupFooterTemplate ayararak DataTemplate özelleştirilebilir:

<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>

Bu örnekte, her grup alt bilgi, Label gruptaki öğe sayısını görüntüleyen bir olarak ayarlanır. Aşağıdaki ekran görüntüleri özelleştirilmiş grup alt bilgilerini gösterir:

Özelleştirilmiş grup alt bilgisi ile iOS ve Android üzerinde CollectionView'da özelleştirilmiş grup alt bilgi ekran görüntüsü Özelleştirilmiş grup alt

Boş gruplar

Grup CollectionView halindeki veriler görüntüleniyorsa, boş olan tüm gruplar görüntülenir. Bu tür gruplar, grubun boş olduğunu belirten bir grup üst bilgisi ve alt bilgisi ile görüntülenir. Aşağıdaki ekran görüntüleri boş bir grup gösterir:

iOS ve Android üzerinde boş bir gruplaboş

Şablon olmadan grupla

CollectionView" CollectionView data-linktype="absolute-path"Xamarin_Forms _ItemsView_ItemTemplate özelliğini bir olarak ayarlamadan doğru >verileri CollectionView.ItemTemplateDataTemplate görüntüleniyor:

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

Bu senaryoda, tek bir öğeyi modeleyen türdeki yöntemi ve tek bir öğe grubunu modeller türü geçersiz kılınarak anlamlı ToString veriler görüntülenebilir.

İlgili bağlantılar

• CollectionView (örnek)
• Xamarin.Forms Data Templates