Découvrez comment moderniser vos applications avec la vue Carousel vers .NET MAUI pour bénéficier des dernières fonctionnalités et améliorations.
Migration ou pas ?
Comme je le fais souvent remarquer, si MAUI est très proche des Xamarin.Forms il en diffère par mille petites choses. Ceux qui savaient bien manipuler les XF sont souvent tentés de se dire qu'ils connaissent donc MAUI, et ne vont pas jusqu'à tout reprendre à zéro. Je les comprends car c'est pénible pour parfois juste une différence mineure, mais c'est une erreur, car au final un débutant qui démarre avec MAUI aujourd'hui aura de meilleurs réflexes qu'un vétérant des Xamarin.Forms... C'est pourquoi de temps en temps je viens vos proposer de revisiter des contrôles ou des façons de faire qui ne semblent pas être des nouveautés mais qui pourtant contiennent des différences que vous ne connaissez peut-être pas si vous avez migré des Xamarin.Forms ! C'est le cas encore aujourd'hui avec la vue Carousel (pour les puristes en français ça ne prend qu'un "s" aussi mais deux "r").
Comme j'avais déjà présenté cette vue lors de sa sortie pour les Xamarin.Forms je ne vais pas faire de redites et je vous laisse regarder l'essentiel de la base de ce contrôle dans l'article de l'époque, en sachant qu'il présente donc des différences avec l'implémentation de cette vue sous MAUI, ce qui va être traité ici ! L'article XF se trouve ici (avec des petites animatons GIF pour bien comprendre) : https://www.e-naxos.com/Blog/post/XamarinForms-la-nouvelle-vue-Carrousel
Ajouter une CarouselView
Ajouter la vue Carousel à un projet est chose simple (ici en codant en dur les items à afficher, ce qui se fait plutôt par Binding en réalité) :
<CarouselView>
<CarouselView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>First</x:String>
<x:String>Second</x:String>
<x:String>Third</x:String>
</x:Array>
</CarouselView.ItemsSource>
</CarouselView>
Personnalisation de la Vue Carousel
MAUI permet de personnaliser la vue Carousel de manière plus poussée par rapport à Xamarin.Forms. Vous pouvez définir l'orientation, activer le looping, et utiliser des indicateurs visuels pour une navigation intuitive.
<CarouselView
ItemsSource="{Binding Items}"
Loop="True"
HorizontalOptions="FillAndExpand">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding}" />
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Gestion des Données du Carousel
MAUI vous permet de lier facilement des données à la vue Carousel. Utilisez la propriété `ItemsSource` pour définir la collection d'éléments à afficher et `ItemTemplate` pour définir leur apparence.
<CarouselView ItemsSource="{Binding Monkeys}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding Name}" />
<Image Source="{Binding ImageUrl}" />
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Gestion du Layout du Carousel
Avec MAUI, vous pouvez contrôler la disposition des éléments du carousel en définissant les propriétés `ItemsLayout` et `SnapPointsType`.
<CarouselView ItemsSource="{Binding Monkeys}" ItemsLayout="Linear">
<!-- Configuration supplémentaire du layout -->
</CarouselView>
Gestion des Interactions avec le Carousel
Vous pouvez réagir aux changements de position et aux interactions utilisateur en utilisant les événements `PositionChanged` et `ItemSelected`.
<CarouselView ItemsSource="{Binding Monkeys}"
PositionChanged="OnPositionChanged">
</CarouselView>
Gérer une Vue Vide
MAUI permet de définir une vue vide à afficher lorsque la collection d'éléments est vide, en utilisant la propriété `EmptyView`.
<CarouselView ItemsSource="{Binding Monkeys}"
EmptyView="No items to display">
</CarouselView>
Gestion du Scrolling
Contrôlez le comportement du défilement avec les propriétés `ScrollTo`, `IsScrollAnimated`, et `ItemsUpdatingScrollMode` pour une meilleure expérience utilisateur.
carouselView.ScrollTo(monkey, position: ScrollToPosition.Center);
carouselView.IsScrollAnimated = false;
Conclusion
Qu'il s'agisse de migrer la vue Carousel de Xamarin.Forms à .NET MAUI ou bien d'utiliser ce contrôle pour la première fois, il est important d'en connaître les subtilités car il ouvre la porte à des fonctionnalités modernes et à une meilleure expérience utilisateur. Profitez des améliorations apportées par MAUI pour enrichir vos applications. Pour plus d'informations détaillées et des exemples de code, consultez la documentation officielle de .NET MAUI car elle est assez grosse et qu'il n'était pas dans mon propos de la recopier in extenso...
Stay Tuned !