Xamarin.Forms Données CarrouelView
CarouselView
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 .null
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.
Remarque
CarouselView
définit une ItemsUpdatingScrollMode
propriété qui représente le comportement de défilement du CarouselView
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.
CarouselView
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 CarouselView avec des données
Un CarouselView
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, CarouselView
affiche les éléments horizontalement.
Important
Si la CarouselView
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
.
CarouselView
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 :
<CarouselView ItemsSource="{Binding Monkeys}" />
Le code C# équivalent est :
CarouselView carouselView = new CarouselView();
carouselView.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 l’orientation CarouselView
, consultez Xamarin.Forms La disposition CarouselView. Pour plus d’informations sur la définition de l’apparence de chaque élément dans le , consultez Définir l’apparence CarouselView
de l’élément. Pour plus d’informations sur la liaison de données, consultez Xamarin.Forms Liaison de données.
Définir l’apparence de l’élément
L’apparence de chaque élément dans l’élément CarouselView
peut être définie en définissant la CarouselView.ItemTemplate
propriété sur un DataTemplate
:
<CarouselView ItemsSource="{Binding Monkeys}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding Name}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Image Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="150"
WidthRequest="150"
HorizontalOptions="Center" />
<Label Text="{Binding Location}"
HorizontalOptions="Center" />
<Label Text="{Binding Details}"
FontAttributes="Italic"
HorizontalOptions="Center"
MaxLines="5"
LineBreakMode="TailTruncation" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Le code C# équivalent est :
CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.ItemTemplate = new DataTemplate(() =>
{
Label nameLabel = new Label { ... };
nameLabel.SetBinding(Label.TextProperty, "Name");
Image image = new Image { ... };
image.SetBinding(Image.SourceProperty, "ImageUrl");
Label locationLabel = new Label { ... };
locationLabel.SetBinding(Label.TextProperty, "Location");
Label detailsLabel = new Label { ... };
detailsLabel.SetBinding(Label.TextProperty, "Details");
StackLayout stackLayout = new StackLayout
{
Children = { nameLabel, image, locationLabel, detailsLabel }
};
Frame frame = new Frame { ... };
StackLayout rootStackLayout = new StackLayout
{
Children = { frame }
};
return rootStackLayout;
});
Éléments spécifiés dans la définition de l’apparence DataTemplate
de chaque élément dans le CarouselView
. Dans l’exemple, la disposition dans le fichier DataTemplate
est gérée par un StackLayout
objet et les données sont affichées avec un Image
objet, et trois 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 :
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 CarouselView
, en fonction de la valeur de l’élément, en définissant la CarouselView.ItemTemplate
propriété sur un DataTemplateSelector
objet :
<ContentPage ...
xmlns:controls="clr-namespace:CarouselViewDemos.Controls"
x:Class="CarouselViewDemos.Views.HorizontalLayoutDataTemplateSelectorPage">
<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>
<CarouselView ItemsSource="{Binding Monkeys}"
ItemTemplate="{StaticResource MonkeySelector}" />
</ContentPage>
Le code C# équivalent est :
CarouselView carouselView = new CarouselView
{
ItemTemplate = new MonkeyDataTemplateSelector { ... }
};
carouselView.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 DataTemplate
AmericanMonkey
et OtherMonkey
définies sur différents modèles de données. Le OnSelectTemplate
remplacement retourne le AmericanMonkey
modèle 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 ses données grisées :
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 CarouselView
, 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 CarouselView
elle n’a pas de concept de cellules.
Indicateurs d’affichage
Indicateurs, qui représentent le nombre d’éléments et la position actuelle dans un CarouselView
, peuvent être affichés en regard du CarouselView
. Vous pouvez effectuer cette opération avec le IndicatorView
contrôle :
<StackLayout>
<CarouselView ItemsSource="{Binding Monkeys}"
IndicatorView="indicatorView">
<CarouselView.ItemTemplate>
<!-- DataTemplate that defines item appearance -->
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="Center" />
</StackLayout>
Dans cet exemple, le IndicatorView
rendu est affiché sous le CarouselView
, avec un indicateur pour chaque élément du CarouselView
. Le IndicatorView
remplissage est rempli avec des données en définissant la CarouselView.IndicatorView
propriété sur l’objet IndicatorView
. Chaque indicateur est un cercle gris clair, tandis que l’indicateur qui représente l’élément actuel dans le CarouselView
gris foncé :
Important
La définition de la CarouselView.IndicatorView
propriété génère la IndicatorView.Position
liaison de propriété à la CarouselView.Position
propriété et la IndicatorView.ItemsSource
liaison de propriété à la CarouselView.ItemsSource
propriété.
Pour plus d’informations sur les indicateurs, consultez Xamarin.Forms IndicatorView.
Menu contextuels
CarouselView
prend en charge les menus contextuels pour les éléments de données par le biais du SwipeView
menu 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 CarouselView
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, ajoutez un SwipeView
à celui DataTemplate
qui définit l’apparence de chaque élément de données dans les CarouselView
éléments suivants :
<CarouselView x:Name="carouselView"
ItemsSource="{Binding Monkeys}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<SwipeView>
<SwipeView.TopItems>
<SwipeItems>
<SwipeItem Text="Favorite"
IconImageSource="favorite.png"
BackgroundColor="LightGreen"
Command="{Binding Source={x:Reference carouselView}, Path=BindingContext.FavoriteCommand}"
CommandParameter="{Binding}" />
</SwipeItems>
</SwipeView.TopItems>
<SwipeView.BottomItems>
<SwipeItems>
<SwipeItem Text="Delete"
IconImageSource="delete.png"
BackgroundColor="LightPink"
Command="{Binding Source={x:Reference carouselView}, Path=BindingContext.DeleteCommand}"
CommandParameter="{Binding}" />
</SwipeItems>
</SwipeView.BottomItems>
<StackLayout>
<!-- Define item appearance -->
</StackLayout>
</SwipeView>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Le code C# équivalent est :
CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.ItemTemplate = new DataTemplate(() =>
{
StackLayout stackLayout = new StackLayout();
Frame frame = new Frame { ... };
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: carouselView));
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: carouselView));
deleteSwipeItem.SetBinding(MenuItem.CommandParameterProperty, ".");
swipeView.TopItems = new SwipeItems { favoriteSwipeItem };
swipeView.BottomItems = new SwipeItems { deleteSwipeItem };
StackLayout swipeViewStackLayout = new StackLayout { ... };
swipeView.Content = swipeViewStackLayout;
frame.Content = swipeView;
stackLayout.Children.Add(frame);
return stackLayout;
});
Dans cet exemple, le SwipeView
contenu est un StackLayout
qui définit l’apparence de chaque élément entouré d’un Frame
dans le CarouselView
. 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 haut et du bas :
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
CarouselView
prend en charge l’extraction pour actualiser les fonctionnalités via le RefreshView
, ce qui permet d’actualiser les données affichées en les extrayant sur les é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 CarouselView
en le définissant comme enfant d’un RefreshView
:
<RefreshView IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<CarouselView ItemsSource="{Binding Animals}">
...
</CarouselView>
</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;
CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
refreshView.Content = carouselView;
// ...
Lorsque l’utilisateur lance une actualisation, la ICommand
Command
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
CarouselView
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.
CarouselView
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énementRemainingItemsThresholdReached
sera déclenché.RemainingItemsThresholdReachedCommand
, de typeICommand
, qui est exécuté lorsque l’objetRemainingItemsThreshold
est atteint.RemainingItemsThresholdReachedCommandParameter
, de typeobject
: paramètre passé à la commandeRemainingItemsThresholdReachedCommand
.
CarouselView
définit également un RemainingItemsThresholdReached
événement déclenché lorsque le CarouselView
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
CarouselView
valide la RemainingItemsThreshold
propriété afin que sa valeur soit toujours supérieure ou égale à -1.
L’exemple XAML suivant illustre un CarouselView
chargement incrémentiel des données :
<CarouselView ItemsSource="{Binding Animals}"
RemainingItemsThreshold="2"
RemainingItemsThresholdReached="OnCarouselViewRemainingItemsThresholdReached"
RemainingItemsThresholdReachedCommand="{Binding LoadMoreDataCommand}">
...
</CarouselView>
Le code C# équivalent est :
CarouselView carouselView = new CarouselView
{
RemainingItemsThreshold = 2
};
carouselView.RemainingItemsThresholdReached += OnCollectionViewRemainingItemsThresholdReached;
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
Dans cet exemple de code, l’événement RemainingItemsThresholdReached
se déclenche lorsqu’il y a 2 é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.