Xamarin.Forms CollectionView Verileri
Örneği indirmeCollectionView görüntülenecek verileri tanımlayan aşağıdaki özellikleri ve görünümünü içerir:
ItemsSource, türündeIEnumerable, görüntülenecek öğe koleksiyonunu belirtir ve varsayılan değerinenullsahiptir.ItemTemplatetüründeDataTemplate, görüntülenecek öğe koleksiyonundaki her öğeye uygulanacak şablonu belirtir.
Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da özelliklerin veri bağlamalarının hedefleri olabileceği anlamına gelir.
Not
CollectionView, yeni öğeler eklendiğinde öğesinin CollectionView kaydırma davranışını temsil eden bir ItemsUpdatingScrollMode özelliği tanımlar. Bu özellik hakkında daha fazla bilgi için bkz . Yeni öğeler eklendiğinde kaydırma konumunu denetleme.
CollectionView kullanıcı kaydırdıkça artımlı veri sanallaştırmayı destekler. Daha fazla bilgi için bkz . Verileri artımlı olarak yükleme.
CollectionView'ı verilerle doldurma
, CollectionView özelliğini uygulayan IEnumerableherhangi bir koleksiyona ayarlayarak ItemsSource verilerle doldurulur. Varsayılan olarak, CollectionView öğeleri dikey listede görüntüler.
Önemli
temel alınan koleksiyonda CollectionView öğeler eklendikçe, kaldırıldıkçe veya değiştikçe yenilemek için gerekliyse, temel koleksiyon gibi ObservableCollectionözellik değişiklik bildirimleri gönderen bir IEnumerable koleksiyon olmalıdır.
CollectionViewözelliğini bir IEnumerable koleksiyona bağlamak ItemsSource için veri bağlama kullanılarak verilerle doldurulabilir. XAML'de bu, işaretleme uzantısıyla Binding elde edilir:
<CollectionView ItemsSource="{Binding Monkeys}" />
Eşdeğer C# kodu:
CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Bu örnekte, ItemsSource özellik verileri bağlı görünüm modelinin Monkeys özelliğine bağlanır.
Not
Derlenmiş bağlamalar, uygulamalarda veri bağlama performansını Xamarin.Forms geliştirmek için etkinleştirilebilir. Daha fazla bilgi için bkz . Derlenmiş Bağlamalar.
Düzeni değiştirme CollectionView hakkında bilgi için bkz Xamarin.Forms . CollectionView Düzeni. içindeki CollectionViewher öğenin görünümünü tanımlama hakkında bilgi için bkz . Öğe görünümünü tanımlama. Veri bağlama hakkında daha fazla bilgi için bkz Xamarin.Forms . Veri Bağlama.
Uyarı
CollectionView kullanıcı arabirimi iş parçacığından güncelleştirilirse ItemsSource bir özel durum oluşturur.
Öğe görünümünü tanımlama
içindeki CollectionView her öğenin görünümü, özelliği olarak DataTemplateayarlanarak CollectionView.ItemTemplate 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:
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 DataTemplate belirtilen öğeler listedeki her öğenin görünümünü tanımlar. Örnekte içindeki düzen DataTemplate bir Gridtarafından yönetilir. , Grid sınıfın özelliklerine Monkey bağlanan bir Image nesne ve iki Label nesne 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 listedeki her öğeyi şablon oluşturmanın sonucunu gösterir:
Veri şablonları hakkında daha fazla bilgi için bkz Xamarin.Forms . Veri Şablonları.
Çalışma zamanında öğe görünümünü seçme
içindeki her öğenin CollectionView görünümü, öğe değerine göre çalışma zamanında özelliği bir DataTemplateSelector nesne olarak ayarlanarak CollectionView.ItemTemplate 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:
CollectionView collectionView = new CollectionView
{
ItemTemplate = new MonkeyDataTemplateSelector { ... }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
ItemTemplate özelliği bir MonkeyDataTemplateSelector nesneye ayarlanır. Aşağıdaki örnekte sınıfı gösterilmektedir MonkeyDataTemplateSelector :
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;
}
}
MonkeyDataTemplateSelector sınıfı, farklı veri şablonlarına ayarlanmış ve OtherMonkeyDataTemplate özelliklerini tanımlarAmericanMonkey. Geçersiz OnSelectTemplate kılma, maymun adı "America" içerdiğinde, maymun adını ve konumunu teal olarak görüntüleyen şablonu döndürür AmericanMonkey . Maymun adı "Amerika" içermediğinde geçersiz kılma, OnSelectTemplate maymun adını ve konumunu gümüş olarak görüntüleyen şablonu döndürür OtherMonkey :
Veri şablonu seçicileri hakkında daha fazla bilgi için bkz. DataTemplateSelector oluşturmaXamarin.Forms.
Önemli
kullanırken CollectionView, nesnelerinizin DataTemplate kök öğesini hiçbir zaman olarak ViewCellayarlamayın. Bu, hücre kavramı olmadığından özel durum oluşturmayla CollectionView sonuçlanır.
Bağlam menüleri
CollectionView aracılığıyla veri SwipeViewöğeleri için bağlam menülerini destekler. Bu, çekme hareketiyle bağlam menüsünü gösterir. SwipeView, bir içerik öğesinin çevresinde kaydıran ve bu içerik öğesi için bağlam menüsü öğeleri sağlayan bir kapsayıcı denetimidir. Bu nedenle, bağlam menüleri, kaydırılan içeriği SwipeView tanımlayan bir SwipeView oluşturularak ve çekme hareketi tarafından ortaya çıkarılan bağlam menüsü öğeleri oluşturularak için uygulanırCollectionView. Bu, içindeki her veri CollectionViewöğesinin görünümünü tanımlayan kök görünümü DataTemplate olarak ayarlayarak SwipeView elde edilir:
<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:
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 içerik, SwipeView içindeki CollectionViewher öğenin görünümünü tanımlayan bir Grid öğesidir. Çekme öğeleri içerik üzerinde SwipeView eylem gerçekleştirmek için kullanılır ve denetim sol taraftan çekildiğinde gösterilir:
SwipeView dört farklı çekme yönünü destekler ve çekme yönü nesnelerin eklendiği yön SwipeItems koleksiyonu SwipeItems tarafından tanımlanır. Varsayılan olarak, kullanıcı tarafından dokunulduğunda çekme öğesi yürütülür. Ayrıca, bir çekme öğesi yürütüldükten sonra çekme öğeleri gizlenir SwipeView ve içerik yeniden görüntülenir. Ancak, bu davranışlar değiştirilebilir.
Denetim hakkında SwipeView daha fazla bilgi için bkz Xamarin.Forms . SwipeView.
Yenilemek için çekme
CollectionView aracılığıyla işlevselliği RefreshViewyenilemek için çekmeyi destekler. Bu, görüntülenen verilerin öğe listesinden çekilerek yenilenmesini sağlar. RefreshView, alt öğesinin kaydırılabilir içeriği desteklemesi koşuluyla alt öğesine yenileme işlevselliğini çekme olanağı sağlayan bir kapsayıcı denetimidir. Bu nedenle yenilemeye çekme işlemi, öğesinin CollectionView alt öğesi RefreshViewolarak ayarlanarak için uygulanır:
<RefreshView IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<CollectionView ItemsSource="{Binding Animals}">
...
</CollectionView>
</RefreshView>
Eşdeğer C# kodu:
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 ICommand , özelliği tarafından Command tanımlanan yürütülür ve görüntülenen öğelerin yenilenmesi gerekir. Yenileme gerçekleşirken bir yenileme görselleştirmesi gösterilir ve bu görselleştirme animasyonlu bir ilerleme çemberi içerir:
özelliğinin RefreshView.IsRefreshing değeri, geçerli durumunu RefreshViewgösterir. Kullanıcı tarafından bir yenileme tetiklendiğinde, bu özellik otomatik olarak öğesine truegeçiş yapacaktır. Yenileme tamamlandıktan sonra özelliğini olarak falsesıfırlamanız gerekir.
hakkında RefreshViewdaha fazla bilgi için bkz Xamarin.Forms . RefreshView.
Verileri artımlı olarak yükleme
CollectionView kullanıcı kaydırdıkça artımlı veri sanallaştırmayı destekler. Bu, kullanıcı kaydırdıkça bir web hizmetinden zaman uyumsuz olarak veri sayfası yükleme gibi senaryoları etkinleştirir. Ayrıca, kullanıcıların boş alan görmemesi veya kaydırması durdurulması için daha fazla verinin yüklendiği nokta yapılandırılabilir.
CollectionView verilerin artımlı yüklenmesini denetlemek için aşağıdaki özellikleri tanımlar:
RemainingItemsThreshold, türündeint, olayın tetiklendiği listedeRemainingItemsThresholdReachedhenüz görünür olmayan öğelerin eşiğidir.RemainingItemsThresholdReachedCommand, türündekiICommandöğesine ulaşıldığındaRemainingItemsThresholdyürütülür.RemainingItemsThresholdReachedCommandParameter, türündekiobjectparametresineRemainingItemsThresholdReachedCommandgeçirilir.
CollectionViewayrıca, öğesi öğelerin görüntülenmediği kadar RemainingItemsThreshold uzağa kaydırıldığında CollectionView tetiklenen bir RemainingItemsThresholdReached olayı tanımlar. Bu olay daha fazla öğe yüklemek için işlenebilir. Buna ek olarak, olay tetiklendiğinde RemainingItemsThresholdReachedRemainingItemsThresholdReachedCommand yürütülür ve artımlı veri yüklemenin bir görünüm modelinde gerçekleşmesini sağlar.
Özelliğinin RemainingItemsThreshold varsayılan değeri -1'dir ve bu RemainingItemsThresholdReached da olayın hiçbir zaman tetiklenmeyeceğini gösterir. Özellik değeri 0 olduğunda, RemainingItemsThresholdReached içindeki son öğe ItemsSource görüntülendiğinde olay tetiklenir. 0'dan büyük değerler için olay, RemainingItemsThresholdReached henüz kaydırılmayan ItemsSource öğe sayısını içerdiğinde tetiklenir.
Not
CollectionView değerinin RemainingItemsThreshold her zaman -1 değerinden büyük veya eşit olması için özelliğini doğrular.
Aşağıdaki XAML örneği, verileri artımlı olarak yükleyen bir CollectionView örneği gösterir:
<CollectionView ItemsSource="{Binding Animals}"
RemainingItemsThreshold="5"
RemainingItemsThresholdReached="OnCollectionViewRemainingItemsThresholdReached">
...
</CollectionView>
Eşdeğer C# kodu:
CollectionView collectionView = new CollectionView
{
RemainingItemsThreshold = 5
};
collectionView.RemainingItemsThresholdReached += OnCollectionViewRemainingItemsThresholdReached;
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
Bu kod örneğinde, henüz kaydırılmayan RemainingItemsThresholdReached 5 öğe olduğunda olay tetiklenir ve yanıt olarak olay işleyicisi OnCollectionViewRemainingItemsThresholdReached yürütülür:
void OnCollectionViewRemainingItemsThresholdReached(object sender, EventArgs e)
{
// Retrieve more data here and add it to the CollectionView's ItemsSource collection.
}
Not
Veriler, görünüm modelindeki RemainingItemsThresholdReachedCommand bir ICommand uygulamaya bağlanarak artımlı olarak da yüklenebilir.