Xamarin.Forms Données CollectionView
CollectionView inclut les propriétés suivantes qui définissent les données à afficher et son apparence :
ItemsSource, de typeIEnumerable, spécifie la collection d’éléments à afficher et a une valeur par défaut .nullItemTemplate, 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.
Remarque
CollectionView définit une ItemsUpdatingScrollMode propriété qui représente le comportement de défilement du CollectionView moment où de nouveaux éléments sont ajoutés. Pour plus d’informations sur cette propriété, consultez la position de défilement du contrôle lorsque de nouveaux éléments sont ajoutés.
CollectionView prend en charge la virtualisation des données incrémentielles lorsque l’utilisateur défile. Pour plus d’informations, consultez Charger des données de manière incrémentielle.
Remplir un 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 d’une liste verticale.
Important
Si la CollectionView collection sous-jacente doit être actualisée à 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 IEnumerable collection qui envoie des 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é.
Remarque
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 CollectionView Layout. Pour plus d’informations sur la définition de l’apparence de chaque élément dans le , consultez Définir l’apparence CollectionViewde 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 elle ItemsSource est mise à jour hors du thread d’interface utilisateur.
Définir l’apparence de l’élément
L’apparence de chaque élément dans l’élément CollectionView peut être définie en définissant la CollectionView.ItemTemplate propriété sur un 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;
});
Éléments spécifiés dans la définition de l’apparence DataTemplate de chaque élément de la liste. Dans l’exemple, la disposition dans le fichier 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 de l’élément 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 présente la classe 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;
}
}
La classe MonkeyDataTemplateSelector définit les propriétés DataTemplateAmericanMonkey et OtherMonkey 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 téale, 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 :
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 elle n’a pas de concept de cellules.
Menu contextuels
CollectionView prend en charge les menus contextuels pour les éléments de données par le biais du SwipeViewmenu contextuel avec un mouvement de balayage. Il SwipeView s’agit d’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 autour du contenu SwipeView et les éléments de menu contextuel qui sont révélés par le mouvement de balayage. Pour ce faire, définissez la SwipeView vue racine dans la DataTemplate vue racine qui définit l’apparence de chaque élément de données dans les CollectionViewéléments suivants :
<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é du côté gauche :
SwipeView prend en charge quatre directions de balayage différentes, avec la direction de balayage 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éexécuté. 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 l’extraction pour actualiser les fonctionnalités via le RefreshView, ce qui permet d’actualiser les données affichées en extrayant dans la liste des éléments. Il RefreshView s’agit d’un contrôle de conteneur qui fournit une fonctionnalité d’actualisation pour son enfant, à condition que l’enfant prenne en charge le contenu défilant. Par conséquent, l’extraction à 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, la ICommandCommand propriété définie est exécutée, ce qui doit actualiser les éléments affichés. Une visualisation d’actualisation s’affiche lorsque l’actualisation se produit, qui se compose d’un cercle de progression animé :
La valeur de la RefreshView.IsRefreshing propriété indique l’état actuel du 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é sur 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 des données incrémentielles lorsque 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 auquel plus de données sont chargées est configurable afin que les utilisateurs ne voient pas d’espace vide ou ne soient pas arrêtés de faire défiler.
CollectionView définit les propriétés suivantes pour contrôler le chargement incrémentiel des données :
RemainingItemsThreshold, de typeint, le seuil des éléments non encore visibles dans la liste à laquelle l’événementRemainingItemsThresholdReachedsera déclenché.RemainingItemsThresholdReachedCommand, de typeICommand, qui est exécuté lorsque l’objetRemainingItemsThresholdest atteint.RemainingItemsThresholdReachedCommandParameter, de typeobject: paramètre passé à la commandeRemainingItemsThresholdReachedCommand.
CollectionView définit également un RemainingItemsThresholdReached événement déclenché lorsque le CollectionView défilement est suffisant pour que RemainingItemsThreshold les éléments n’aient pas été affichés. Cet événement peut être géré pour charger plus d’éléments. En outre, lorsque l’événement RemainingItemsThresholdReached est déclenché, il RemainingItemsThresholdReachedCommand est exécuté, ce qui permet le chargement incrémentiel des données 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 l’élément ItemsSource est affiché. Pour les valeurs supérieures à 0, l’événement RemainingItemsThresholdReached est déclenché lorsque le ItemsSource nombre d’éléments n’est pas encore affiché.
Remarque
CollectionView valide la RemainingItemsThreshold propriété afin que sa valeur soit toujours supérieure ou égale à -1.
L’exemple XAML suivant illustre un CollectionView chargement incrémentiel des données :
<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 lorsqu’il y a 5 éléments qui ne font pas encore défiler l’écran et qu’en réponse, le OnCollectionViewRemainingItemsThresholdReached gestionnaire d’événements s’exécute :
void OnCollectionViewRemainingItemsThresholdReached(object sender, EventArgs e)
{
// Retrieve more data here and add it to the CollectionView's ItemsSource collection.
}
Remarque
Les données peuvent également être chargées de manière incrémentielle en liant l’implémentation RemainingItemsThresholdReachedCommand à une ICommand implémentation dans le viewmodel.