La page de type Carrousel a été définitivement remplacée par la vue Carrousel. Une évolution qui permet des designs plus attractifs…
Le Carrousel
Tout le monde connait le principe des carrousels, ces espaces permettant de faire translater des images et souvent utilisés pour la présentation de photos, de pochettes de disques ou de DVD.
Jusqu’à maintenant les Xamarin.Forms proposaient une page de ce type. Cela voulait dire que le carrousel ne pouvait exister qu’en tant que page, prenant toute la place et sans possibilité de le mixer avec d’autres éléments visuels. Cela était conforme aux besoins les plus courants pour ce type d’objet visuel mais on pouvait faire plus pratique et plus versatile.
Je n’ai pas traité en détail les pages Carrousel (avec deux R en français mais un seul en anglais !) dans mon livre sur les Xamarin.Forms car ce type était déprécié en attente de son remplaçant. Il est arrivé ! Comme annoncé il s’agit désormais d’une vue. Cela ne change pas énormément de choses au départ, l’objet reste sensiblement le même et propose le même comportement. Mais en revanche côté design il s’agit là d’une évolution très intéressante car on peut placer un carrousel de toute taille n’importe où sur une page “normale” et donc enrichir visuellement cette dernière en combinaison d’autres éléments visuels.
Puisque le paquet Nuget de cette nouvelle vue est disponible il est temps d’en parler plus en détail !
Xamarin Studio
Sous Windows Visual Studio est plus intéressant à utiliser car il permet de gérer tous les types de projets. Mais il est tout aussi possible d’utiliser Xamarin Studio qui lui est portable, bien conçu et qui est suffisant si on n’a pas forcément besoin d’intégrer UWP. J’aime aussi rappeler qu’on peut choisir les Xamarin.Forms pour ne faire que de l’Android ou de l’iOS en dehors de tout contexte cross-plateforme, c’est un excellent choix car vous développerez en C# / .NET / XAML sans vous prendre la tête avec XCode de Apple ou le Java d’Android (ce n’est pas tant le langage qui compte mais bien entendu l’apprentissage des OS respectifs, des IDE et toutes ces choses qui prennent plein de temps donc qui coutent très cher).
C’est en cela que je parle de révolution dans mon livre car tous les développeurs .NET sont des développeurs iOS et Android qui s’ignorent le plus souvent ! Vous connaissez .NET, C#, XAML, vous êtes (presque) un développeur Apple ou Android . Presque car il faut apprendre la bibliothèque Xamarin.Forms mais c’est un peu la même chose que d’utiliser une suite de contrôles comme Telerik sous WPF. Ensuite il y a quelques spécificités propres à ce type de développements à connaitre. D’où l’utilité de mon livre et des formations que je fournis 
.
Créer la solution et ajouter le Carrousel
Peu importe l’EDI, créer une solution est toujours facile, c’est la remplir de projets qui font quelque chose qui est plus difficile ! je vous passerai les détails des captures écran, que vous soyez sous VS ou XS cela ne change pas grand chose. Sauf bien sûr le type de projets qui pourra être géré (tous sous VS, Android ou Apple sous XS). J’avoue que j’aime bien travailler sous XS quand UWP n’a pas besoin d’être couvert. D’une part parce qu’il est toujours possible d’ajouter de nouvelles plateformes à une solution et d’utiliser alors VS, et parce que si VS sait tout faire (et la liste est hallucinante) c’est devenu au fil du temps un monstre. Xamarin Studio est plus sobre ça repose les yeux.
Le contrôle CarouselView sera certainement intégré directement aux Xamarin.Forms mais pour l’instant s’agissant d’une preview il convient d’installer un package Nuget à part (dans le projet PCL commun et dans chaque projet natif).
Cliquez sur l’image pour obtenir une version à 100% (ce qui est valable pour les autres captures à venir).
Le projet de démo
Vue finale
Il est toujours plus facile de comprendre un code une fois qu’on a vu ce qu’il fait… Voici la capture du projet tournant sous émulateur Android (simulant du Jellybean en 4”) :
J’ai placé le carrousel en haut de l’écran en le décorant d’un bandeau affichant un texte lié à l’image. En dessous s’étend une zone grise qui pourrait par exemple contenir une liste dont le contenu change en fonction de la photo affichée ou bien n’importe quoi d’autre !
Voici une capture GIF de l’effet de balayage :
Bien entendu il est possible de positionner le contrôle CarouselView où on veut comme toute vue Xamarin.Forms. Il est tout aussi possible de retrouver le comportement de l’ancienne page carrousel en faisant en sorte que le contrôle occupe tout l’espace.
Le code
Le code source du projet étant téléchargeable en fin d’article je vais faire court : Il existe un Modèle, le NatureItem qui est une classe contenant une URL et un nom. L’URL pointe sur la photo à afficher (ici un service Web retournant des images de test, bien pratique). Il y a un ImageProvider qui retourne une collection de NatureItem (ici une liste figée mais bien entendu cela pourrait être dynamique). On retrouve un ViewModel qui expose la liste des items. Et Enfin la MainPage qui affiche le carrousel en faisant un binding sur la propriété liste du ViewModel.
Pour agrémenter le tout l’espace grisé contient un Label qui affiche le titre de la photo en cours. Cela pour montrer qu’on peut synchroniser d’autres affichages au carrousel.
Voici le code le plus intéressant de la démo, celui du code XAML :
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
x:Class="DemoCarroussel.MainPage">
<ContentPage.Content>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height=".3*"/>
<RowDefinition Height=".7*"/>
</Grid.RowDefinitions>
<cv:CarouselView x:Name="CarouselView" ItemsSource="{Binding Items}" ItemSelected="CarouselView_OnItemSelected">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding Url}"/>
<StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
<Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Grid>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
<BoxView Grid.Row="1" Grid.Column="0" Color="Silver"/>
<Label x:Name="Label" Grid.Row="1" Grid.Column="0" FontSize="22" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</Grid>
</ContentPage.Content>
</ContentPage>
Vous noterez l’ajout du namespace “cv” qui est indispensable pour accéder à la classe CarouselView ainsi que l’utilisation de cette dernière dont le code pourrait se résumer à sa première ligne, celle qui lie ItemsSource à la propriété Item du ViewModel. Tout le reste est décors.
Ce décors consiste en la définition d’un DataTemplate personnalisant l’affichage des images en l’agrémentant d’une barre inférieure transparente contenant le nom retourné par le NatureItem courant.
Ensuite se trouve la zone grisée (une simple BoxView grise) et le Label qui affiche lui aussi le titre de l’image.
Vous remarquerez que cet affichage passe par l’évènement ItemSelected qui est défini dans le code-behind et qui change la valeur Text du Label. S’agissant d’une opération purement d’UI il n’est pas “illicite” sous MVVM de procéder ainsi. Le contrôle ne possède pas encore d’équivalent de type Command pour ses évènements, il est en preview ne l’oublions pas, et je suppose que cette lacune sera réglée dans la version finale. Mais cela n’interdit pas de répondre proprement au changement d’item comme le montre ce code.
Pour s’assurer que le contrôle est bien lié par le compilateur (plus exactement le linker) il est préférable de passer en mode XAML compilé ce que je conseille dans tous les cas. Pour ce faire il faut utiliser l’attribut suivant au-dessus du namespace du projet (par exemple dans App.Xaml.cs) :
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
Conclusion
Le passage d’une page dédiée à une vue utilisable n’importe où dans une page est un véritable progrès. Le carrousel est un contrôle désormais classique en UI que cela soit sur le Web ou sur les mobiles. Sous la forme d’une vue il devient possible de le placer en bandeau d’une page comme le fait la démo ou ailleurs bien entendu. Synchroniser une liste, un texte ou autre avec la photo en cours permet aussi de concevoir une UI plus “sexy” qu’une page à onglets par exemple.
Bref c’est un contrôle qui ajoutera de l’esthétique et du répondant à vos UI.
La preview est forcément à prendre avec un peu de précaution et pour une projet en production je vous conseille bien évidemment d’attendre la version finale.
Stay Tuned !
Voici le code de la solution :