Xamarin.Forms CollectionView Verileri

Örneği indirme

CollectionView görüntülenecek verileri ve görünümünü tanımlayan aşağıdaki özellikleri içerir:

• _ItemsView_ItemsSource" data-linktype="absolute-path">, türünde , görüntülenecek öğe koleksiyonunu belirtir ve varsayılan ItemsSourceIEnumerable değerine null sahiptir.
• Xamarin_Forms _ItemsView_ItemTemplate" data-linktype="absolute-path">, türünde, görüntülenecek öğe koleksiyonunda her öğeye uygulanacak ItemTemplateDataTemplate şablonu belirtir.

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

CollectionView , kullanıcı kaydırarak artımlı veri sanallaştırmayı destekler. Daha fazla bilgi için bkz. Verileri artımlı olarak yükleme.

CollectionView'u verilerle doldurmak

, verilerle doldurulur ve Xamarin_Forms CollectionViewCollectionView _ItemsView_ItemsSource" data-linktype="absolute-path">özelliğini uygulayan herhangi bir ItemsSource koleksiyona IEnumerable ayarlar. Varsayılan olarak, CollectionView öğeleri dikey bir listede görüntüler.

CollectionViewveri bağlama kullanılarak verilerle doldurularak Xamarin_Forms CollectionView _ItemsView_ItemsSource" data-linktype="absolute-path">özelliği bir ItemsSource koleksiyona IEnumerable bağlanabilir. XAML'de bu, işaretleme uzantısıyla Binding elde edilir:

<CollectionView ItemsSource="{Binding Monkeys}" />

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

CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Bu örnekte, Xamarin_Forms _ItemsView_ItemsSource" data-linktype="absolute-path">özelliği veri bağlı ItemsSourceMonkeys viewmodel'in özelliğine bağlanır.

Düzeni değiştirme hakkında bilgi için CollectionView bkz. Xamarin.Forms CollectionView Layout . içinde her bir öğenin görünümünü tanımlama hakkında bilgi için CollectionView bkz. CollectionView Veri bağlama hakkında daha fazla bilgi için Xamarin.Forms Data Binding bkz. .

Öğe görünümünü tanımlama

öğ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ımlanabilir:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <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();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

collectionView.ItemTemplate = new DataTemplate(() =>
{
    Grid grid = new Grid { Padding = 10 };
    grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });

    Image image = new Image { Aspect = Aspect.AspectFill, HeightRequest = 60, WidthRequest = 60 };
    image.SetBinding(Image.SourceProperty, "ImageUrl");

    Label nameLabel = new Label { FontAttributes = FontAttributes.Bold };
    nameLabel.SetBinding(Label.TextProperty, "Name");

    Label locationLabel = new Label { FontAttributes = FontAttributes.Italic, VerticalOptions = LayoutOptions.End };
    locationLabel.SetBinding(Label.TextProperty, "Location");

    Grid.SetRowSpan(image, 2);

    grid.Children.Add(image);
    grid.Children.Add(nameLabel, 1, 0);
    grid.Children.Add(locationLabel, 1, 1);

    return grid;
});

içinde belirtilen DataTemplate öğeler, listede her öğenin görünümünü tanımlar. Örnekte içindeki düzen bir DataTemplate tarafından Grid yönetilir. Grid, bir nesnesi ve tüm sınıf ImageLabel özelliklerine bağlanan iki nesne Monkey içerir:

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

Aşağıdaki ekran görüntüleri, listede yer alan her bir öğenin templating sonucu gösterir:

sahip öğeler CollectionView'un ekran görüntüsü. Burada, iOS ve Android'de her öğe bir

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

Çalışma zamanında öğe görünümünü seçme

CollectionViewXamarin_Forms CollectionView _ItemsView_ItemTemplate" data-linktype="absolute-path">özelliğini bir nesnesine ayar alarak öğesi değerindeki her öğenin çalışma zamanında görünümü CollectionView.ItemTemplateDataTemplateSelector seçilebilir:

<ContentPage ...
             xmlns:controls="clr-namespace:CollectionViewDemos.Controls">
    <ContentPage.Resources>
        <DataTemplate x:Key="AmericanMonkeyTemplate">
            ...
        </DataTemplate>

        <DataTemplate x:Key="OtherMonkeyTemplate">
            ...
        </DataTemplate>

        <controls:MonkeyDataTemplateSelector x:Key="MonkeySelector"
                                             AmericanMonkey="{StaticResource AmericanMonkeyTemplate}"
                                             OtherMonkey="{StaticResource OtherMonkeyTemplate}" />
    </ContentPage.Resources>

    <CollectionView ItemsSource="{Binding Monkeys}"
                    ItemTemplate="{StaticResource MonkeySelector}" />
</ContentPage>

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

CollectionView collectionView = new CollectionView
{
    ItemTemplate = new MonkeyDataTemplateSelector { ... }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Xamarin_Forms _ItemsView_ItemTemplate" data-linktype="absolute-path">ItemTemplate özelliği bir nesnesine MonkeyDataTemplateSelector ayarlanır. Aşağıdaki örnekte sınıfı MonkeyDataTemplateSelector gösterir:

public class MonkeyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate AmericanMonkey { get; set; }
    public DataTemplate OtherMonkey { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((Monkey)item).Location.Contains("America") ? AmericanMonkey : OtherMonkey;
    }
}

MonkeyDataTemplateSelectorsınıfı, AmericanMonkey farklı veri OtherMonkeyDataTemplate şablonlarına ayarlanmış ve özelliklerini tanımlar. Geçersiz OnSelectTemplate kılma, maymun adı "America" ifadesini içerdiğinde maymun adını ve teal konumunu AmericanMonkey görüntüleyen şablonu döndürür. Maymun adı "America" içermese geçersiz kılma, maymun adını ve konumunu gümüş olarak OnSelectTemplateOtherMonkey görüntüleyen şablonu döndürür:

öğesi şablonu seçimi CollectionView çalışma zamanı öğesi şablonu seçimininve Android çalışma zamanı öğe şablonu seçimi

Veri şablonu seçicileri hakkında daha fazla bilgi için bkz. Create a Xamarin.Forms DataTemplateSelector .

Bağlam menüleri

CollectionView aracılığıyla veri öğeleri için bağlam menülerini SwipeView destekler. Bu menü, çekme hareketiyle bağlam menüsünü gösterir. , bir içerik öğesini sarmalar ve bu içerik öğesi için SwipeView bağlam menüsü öğeleri sağlayan bir kapsayıcı denetimidir. Bu nedenle bağlam menüleri, sarmaladığı içeriği ve çekme hareketiyle ortaya çıkaran bağlam menüsü öğelerini tanımlayan bir oluşturarak CollectionViewSwipeView için SwipeView uygulanır. Bu, öğesinde SwipeView öğesinde her bir veri öğesinin görünümünü tanımlayan kök DataTemplate görünümü olarak CollectionView ayarlanmıştır:

<CollectionView x:Name="collectionView"
                ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <SwipeView>
                <SwipeView.LeftItems>
                    <SwipeItems>
                        <SwipeItem Text="Favorite"
                                   IconImageSource="favorite.png"
                                   BackgroundColor="LightGreen"
                                   Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.FavoriteCommand}"
                                   CommandParameter="{Binding}" />
                        <SwipeItem Text="Delete"
                                   IconImageSource="delete.png"
                                   BackgroundColor="LightPink"
                                   Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.DeleteCommand}"
                                   CommandParameter="{Binding}" />
                    </SwipeItems>
                </SwipeView.LeftItems>
                <Grid BackgroundColor="White"
                      Padding="10">
                    <!-- Define item appearance -->
                </Grid>
            </SwipeView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

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

CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

collectionView.ItemTemplate = new DataTemplate(() =>
{
    // Define item appearance
    Grid grid = new Grid { Padding = 10, BackgroundColor = Color.White };
    // ...

    SwipeView swipeView = new SwipeView();
    SwipeItem favoriteSwipeItem = new SwipeItem
    {
        Text = "Favorite",
        IconImageSource = "favorite.png",
        BackgroundColor = Color.LightGreen
    };
    favoriteSwipeItem.SetBinding(MenuItem.CommandProperty, new Binding("BindingContext.FavoriteCommand", source: collectionView));
    favoriteSwipeItem.SetBinding(MenuItem.CommandParameterProperty, ".");

    SwipeItem deleteSwipeItem = new SwipeItem
    {
        Text = "Delete",
        IconImageSource = "delete.png",
        BackgroundColor = Color.LightPink
    };
    deleteSwipeItem.SetBinding(MenuItem.CommandProperty, new Binding("BindingContext.DeleteCommand", source: collectionView));
    deleteSwipeItem.SetBinding(MenuItem.CommandParameterProperty, ".");

    swipeView.LeftItems = new SwipeItems { favoriteSwipeItem, deleteSwipeItem };
    swipeView.Content = grid;    
    return swipeView;
});

Bu örnekte SwipeView içerik, içinde Grid her bir öğenin görünümünü tanımlayan bir öğesidir. CollectionView Çekme öğeleri içerik üzerinde eylemler gerçekleştirmek için kullanılır ve denetim sol taraftan çekinca SwipeView ortaya çıkar:

iOS ve Android üzerinde CollectionView bağlam menüsü öğelerinin ekran görüntüsü SwipeView bağlam

SwipeView dört farklı çekme yönünü destekler ve çekme yönü nesnelerin ekli olduğu SwipeItems yönlü SwipeItems koleksiyon tarafından tanımlanır. Varsayılan olarak, kullanıcı tarafından eşlenen bir çekme öğesi yürütülür. Ayrıca, bir çekme öğesi yürütülürken çekme öğeleri gizlenir ve SwipeView içerik yeniden görüntülenir. Ancak bu davranışlar değiştirilebilir.

Denetim hakkında daha fazla SwipeView bilgi için bkz. Xamarin.Forms SwipeView .

Yenilemek için çekme

CollectionView aracılığıyla yenileme işlevini destekler. Bu, görüntülenen verilerin öğe listesinden aşağı çekilerek RefreshView yenilenmesine olanak sağlar. RefreshView, alt tarafından kaydırılabilir içeriği desteklemesi şartıyla alt kullanıcıya yenilemeye çekme işlevi sağlayan bir kapsayıcı denetimidir. Bu nedenle, yenilemeye çekme, için CollectionView bir için bunun alt alt ayarı olarak RefreshView uygulanır:

<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}">
    <CollectionView ItemsSource="{Binding Animals}">
        ...
    </CollectionView>
</RefreshView>

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

RefreshView refreshView = new RefreshView();
ICommand refreshCommand = new Command(() =>
{
    // IsRefreshing is true
    // Refresh data here
    refreshView.IsRefreshing = false;
});
refreshView.Command = refreshCommand;

CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
refreshView.Content = collectionView;
// ...

Kullanıcı bir yenileme başlattığında, özelliği tarafından tanımlanan yürütülür ve ICommandCommand görüntülenen öğeleri yenilemesi gerekir. Yenileme gerçekleşirken bir yenileme görselleştirmesi gösterilir ve bu da animasyonlu bir ilerleme durumu dairesini içerir:

görüntüsü CollectionView yenilemeyeve

özelliğinin RefreshView.IsRefreshing değeri geçerli durumunu RefreshView gösterir. Kullanıcı tarafından bir yenileme tetiklendiğinde, bu özellik otomatik olarak 'ye geçiş true yapılır. Yenileme tamamlandıktan sonra özelliğini olarak sıfırlamanız false gerekir.

hakkında daha fazla bilgi RefreshView için Xamarin.Forms RefreshView bkz. .

Verileri artımlı olarak yükleme

CollectionView , kullanıcı kaydırarak artımlı veri sanallaştırmayı destekler. Bu, kullanıcı kaydırarak web hizmetlerinden bir veri sayfasını zaman uyumsuz olarak yükleme gibi senaryolara olanak sağlar. Ayrıca, kullanıcıların boş alan görmelerini veya kaydırmayı durdurmalarını engel olmak için daha fazla verinin yükleniyor olduğu nokta yapılandırılabilir.

CollectionView verilerin artımlı olarak yüklenmesini kontrol etmek için aşağıdaki özellikleri tanımlar:

• RemainingItemsThresholdtüründe, olayın hangi listede henüz görünür olmadığının intRemainingItemsThresholdReached eşiği.
• RemainingItemsThresholdReachedCommand, ICommand türüne ulaşıldıklarına göre RemainingItemsThreshold yürütülür.
• RemainingItemsThresholdReachedCommandParameter, object türüne geçirilen RemainingItemsThresholdReachedCommand parametresidir.

CollectionView , öğelerin RemainingItemsThresholdReached görüntülenmeyecek kadar CollectionView kaydırıldıkları zaman bir RemainingItemsThreshold olay da tanımlar. Bu olay daha fazla öğe yüklemek için iş olabilir. Buna ek olarak, olay çalıştırıldıklarında yürütülür ve artımlı veri yüklemenin bir RemainingItemsThresholdReachedRemainingItemsThresholdReachedCommand viewmodel'de gerçekleştir etkinleştirilmesi.

Özelliğin varsayılan RemainingItemsThreshold değeri -1'tir ve bu da olayın hiçbir RemainingItemsThresholdReached zaman uyarılmayacak olduğunu gösterir. Özellik değeri 0 olduğunda, RemainingItemsThresholdReached Xamarin_Forms RemainingItemsThresholdReached _ItemsView_ItemsSource" data-linktype="absolute-path">öğesi görüntülendiğinde olay ItemsSource >. 0'dan büyük değerler için, henüz kaydırılmadı öğe sayısını RemainingItemsThresholdReachedItemsSource içerdiğinde olay etkin olur.

Aşağıdaki XAML örneği, verileri CollectionView artımlı olarak yükleyen bir gösterir:

<CollectionView ItemsSource="{Binding Animals}"
                RemainingItemsThreshold="5"
                RemainingItemsThresholdReached="OnCollectionViewRemainingItemsThresholdReached">
    ...
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    RemainingItemsThreshold = 5
};
collectionView.RemainingItemsThresholdReached += OnCollectionViewRemainingItemsThresholdReached;
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");

Bu kod örneğinde, henüz kaydırılmadı 5 öğe olduğunda olay etkindir ve RemainingItemsThresholdReached yanıt olarak olay OnCollectionViewRemainingItemsThresholdReached işleyicisini yürütür:

void OnCollectionViewRemainingItemsThresholdReached(object sender, EventArgs e)
{
    // Retrieve more data here and add it to the CollectionView's ItemsSource collection.
}

İlgili bağlantılar

• CollectionView (örnek)
• Xamarin.Forms RefreshView
• Xamarin.Forms SwipeView
• Xamarin.Forms Data Binding
• Xamarin.Forms Data Templates
• Create a Xamarin.Forms DataTemplateSelector