Xamarin.Forms CollectionView Data
CollectionView
inclut les propriétés suivantes qui définissent les données à afficher et leur apparence :
ItemsSource
, de typeIEnumerable
, spécifie la collection d’éléments à afficher et a la valeurnull
par défaut .ItemTemplate
, de typeDataTemplate
, spécifie le modèle à appliquer à chaque élément de la collection d’éléments à afficher.
Ces propriétés sont sauvegardées par BindableProperty
des objets, ce qui signifie que les propriétés peuvent être des cibles de liaisons de données.
Notes
CollectionView
définit une ItemsUpdatingScrollMode
propriété qui représente le comportement de défilement du lorsque de CollectionView
nouveaux éléments y sont ajoutés. Pour plus d’informations sur cette propriété, consultez Contrôler la position de défilement lorsque de nouveaux éléments sont ajoutés.
CollectionView
prend en charge la virtualisation de données incrémentielle à mesure que l’utilisateur défile. Pour plus d’informations, consultez Charger des données de manière incrémentielle.
Remplir un Objet CollectionView avec des données
Un CollectionView
est rempli avec des données en définissant sa ItemsSource
propriété sur n’importe quelle collection qui implémente IEnumerable
. Par défaut, CollectionView
affiche les éléments dans une liste verticale.
Important
Si le CollectionView
est nécessaire pour s’actualiser à mesure que des éléments sont ajoutés, supprimés ou modifiés dans la collection sous-jacente, la collection sous-jacente doit être une collection qui envoie des IEnumerable
notifications de modification de propriété, telles que ObservableCollection
.
CollectionView
peut être rempli avec des données à l’aide de la liaison de données pour lier sa ItemsSource
propriété à une IEnumerable
collection. En XAML, cela s’effectue avec l’extension de Binding
balisage :
<CollectionView ItemsSource="{Binding Monkeys}" />
Le code C# équivalent est :
CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Dans cet exemple, les données de ItemsSource
propriété sont liées à la Monkeys
propriété du viewmodel connecté.
Notes
Les liaisons compilées peuvent être activées pour améliorer les performances de liaison de données dans les Xamarin.Forms applications. Pour plus d’informations, consultez Liaisons compilées.
Pour plus d’informations sur la modification de la CollectionView
disposition, consultez Xamarin.Forms Disposition CollectionView. Pour plus d’informations sur la définition de l’apparence de chaque élément dans , consultez Définir l’apparenceCollectionView
de l’élément. Pour plus d’informations sur la liaison de données, consultez Xamarin.Forms Liaison de données.
Avertissement
CollectionView
lève une exception si son ItemsSource
est mis à jour hors du thread d’interface utilisateur.
Définir l’apparence de l’élément
L’apparence de chaque élément dans peut CollectionView
être définie en définissant la CollectionView.ItemTemplate
propriété sur :DataTemplate
<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>
Le code C# équivalent est :
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;
});
Les éléments spécifiés dans définissent DataTemplate
l’apparence de chaque élément de la liste. Dans l’exemple, la disposition dans le DataTemplate
est gérée par un Grid
. contient Grid
un Image
objet et deux Label
objets qui sont tous liés aux propriétés de la Monkey
classe :
public class Monkey
{
public string Name { get; set; }
public string Location { get; set; }
public string Details { get; set; }
public string ImageUrl { get; set; }
}
Les captures d’écran suivantes montrent le résultat de la création de modèles pour chaque élément de la liste :
Pour plus d’informations sur les modèles de données, consultez Xamarin.Forms Modèles de données.
Choisir l’apparence de l’élément au moment de l’exécution
L’apparence de chaque élément dans peut être choisie au moment de l’exécution CollectionView
, en fonction de la valeur de l’élément, en définissant la CollectionView.ItemTemplate
propriété sur un DataTemplateSelector
objet :
<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>
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
ItemTemplate = new MonkeyDataTemplateSelector { ... }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
La ItemTemplate
propriété est définie sur un MonkeyDataTemplateSelector
objet . L’exemple suivant montre la MonkeyDataTemplateSelector
classe :
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;
}
}
La MonkeyDataTemplateSelector
classe définit AmericanMonkey
les propriétés et OtherMonkey
DataTemplate
qui sont définies sur différents modèles de données. Le OnSelectTemplate
remplacement retourne le AmericanMonkey
modèle, qui affiche le nom et l’emplacement du singe dans la sarcelle, lorsque le nom du singe contient « America ». Lorsque le nom du singe ne contient pas « America », le OnSelectTemplate
remplacement retourne le OtherMonkey
modèle, qui affiche le nom et l’emplacement du singe en argent :
iOS et Android dans collectionView
Pour plus d’informations sur les sélecteurs de modèles de données, consultez Créer un Xamarin.Forms DataTemplateSelector.
Important
Lorsque vous utilisez CollectionView
, ne définissez jamais l’élément racine de vos DataTemplate
objets sur un ViewCell
. Cela entraîne la levée d’une exception, car CollectionView
n’a pas de concept de cellules.
Menu contextuels
CollectionView
prend en charge les menus contextuels pour les éléments de données via , SwipeView
qui affiche le menu contextuel avec un mouvement de balayage. Est SwipeView
un contrôle conteneur qui encapsule un élément de contenu et fournit des éléments de menu contextuel pour cet élément de contenu. Par conséquent, les menus contextuels sont implémentés pour un CollectionView
en créant un SwipeView
qui définit le contenu que le SwipeView
wrappe et les éléments de menu contextuel qui sont révélés par le mouvement de balayage. Pour ce faire, définissez comme SwipeView
vue racine dans le DataTemplate
qui définit l’apparence de chaque élément de données dans :CollectionView
<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>
Le code C# équivalent est :
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;
});
Dans cet exemple, le SwipeView
contenu est un Grid
qui définit l’apparence de chaque élément dans le CollectionView
. Les éléments de balayage sont utilisés pour effectuer des actions sur le SwipeView
contenu et sont révélés lorsque le contrôle est balayé à partir du côté gauche :
SwipeView
prend en charge quatre directions de balayage différentes, la direction de balayage étant définie par la collection directionnelle SwipeItems
à laquelle les SwipeItems
objets sont ajoutés. Par défaut, un élément de balayage est exécuté lorsqu’il est appuyé par l’utilisateur. En outre, une fois qu’un élément de balayage a été exécuté, les éléments de balayage sont masqués et le SwipeView
contenu est réexpliqué. Toutefois, ces comportements peuvent être modifiés.
Pour plus d’informations sur le SwipeView
contrôle, consultez Xamarin.Forms SwipeView.
Tirer pour actualiser
CollectionView
prend en charge la fonctionnalité d’extraction pour actualiser par le RefreshView
biais de , qui permet d’actualiser les données affichées en tirant vers le bas dans la liste des éléments. est RefreshView
un contrôle de conteneur qui fournit la fonctionnalité d’extraction pour actualiser à son enfant, à condition que l’enfant prenne en charge le contenu avec défilement. Par conséquent, l’opération pull pour actualiser est implémentée pour un CollectionView
en le définissant comme enfant d’un RefreshView
:
<RefreshView IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<CollectionView ItemsSource="{Binding Animals}">
...
</CollectionView>
</RefreshView>
Le code C# équivalent est :
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;
// ...
Lorsque l’utilisateur lance une actualisation, le ICommand
défini par la Command
propriété est exécuté, ce qui doit actualiser les éléments affichés. Une visualisation d’actualisation s’affiche pendant l’actualisation, qui se compose d’un cercle de progression animé :
La valeur de la RefreshView.IsRefreshing
propriété indique l’état actuel de .RefreshView
Lorsqu’une actualisation est déclenchée par l’utilisateur, cette propriété passe automatiquement à true
. Une fois l’actualisation terminée, vous devez réinitialiser la propriété à false
.
Pour plus d’informations sur RefreshView
, consultez Xamarin.Forms RefreshView.
Charger des données de manière incrémentielle
CollectionView
prend en charge la virtualisation de données incrémentielle à mesure que l’utilisateur défile. Cela permet des scénarios tels que le chargement asynchrone d’une page de données à partir d’un service web, à mesure que l’utilisateur défile. En outre, le point de chargement d’un plus grand nombre de données est configurable afin que les utilisateurs ne voient pas d’espace vide ou soient arrêtés de défiler.
CollectionView
définit les propriétés suivantes pour contrôler le chargement incrémentiel des données :
RemainingItemsThreshold
, de typeint
, seuil des éléments qui ne sont pas encore visibles dans la liste à laquelle l’événementRemainingItemsThresholdReached
sera déclenché.RemainingItemsThresholdReachedCommand
, de typeICommand
, qui est exécuté lorsque estRemainingItemsThreshold
atteint.RemainingItemsThresholdReachedCommandParameter
, de typeobject
: paramètre passé à la commandeRemainingItemsThresholdReachedCommand
.
CollectionView
définit également un RemainingItemsThresholdReached
événement qui est déclenché lorsque le CollectionView
défile suffisamment pour que RemainingItemsThreshold
les éléments n’aient pas été affichés. Cet événement peut être géré pour charger davantage d’éléments. En outre, lorsque l’événement RemainingItemsThresholdReached
est déclenché, le RemainingItemsThresholdReachedCommand
est exécuté, ce qui permet au chargement incrémentiel des données d’avoir lieu dans un viewmodel.
La valeur par défaut de la RemainingItemsThreshold
propriété est -1, ce qui indique que l’événement RemainingItemsThresholdReached
ne sera jamais déclenché. Lorsque la valeur de la propriété est 0, l’événement RemainingItemsThresholdReached
est déclenché lorsque l’élément final de est ItemsSource
affiché. Pour les valeurs supérieures à 0, l’événement RemainingItemsThresholdReached
est déclenché lorsque contient le ItemsSource
nombre d’éléments qui n’ont pas encore fait défiler vers.
Notes
CollectionView
valide la RemainingItemsThreshold
propriété afin que sa valeur soit toujours supérieure ou égale à -1.
L’exemple XAML suivant montre un qui charge des CollectionView
données de manière incrémentielle :
<CollectionView ItemsSource="{Binding Animals}"
RemainingItemsThreshold="5"
RemainingItemsThresholdReached="OnCollectionViewRemainingItemsThresholdReached">
...
</CollectionView>
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
RemainingItemsThreshold = 5
};
collectionView.RemainingItemsThresholdReached += OnCollectionViewRemainingItemsThresholdReached;
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
Dans cet exemple de code, l’événement RemainingItemsThresholdReached
se déclenche quand 5 éléments n’ont pas encore fait défiler vers et, en réponse, exécute le gestionnaire d’événements OnCollectionViewRemainingItemsThresholdReached
:
void OnCollectionViewRemainingItemsThresholdReached(object sender, EventArgs e)
{
// Retrieve more data here and add it to the CollectionView's ItemsSource collection.
}
Notes
Les données peuvent également être chargées de manière incrémentielle en liant à RemainingItemsThresholdReachedCommand
une ICommand
implémentation dans le viewmodel.