Depuis la sortie de la version 2.3.0 de Xamarin.Forms un nouveau contrôle est disponible, celui ci est le le carouselView. Ce contrôle va vous permettre de naviguer entre différents éléments d’une liste. Ce composant accepte un itemSource pour gérer votre source de données ainsi qu’un dataTemplate qui vous permettra de définir simplement l’interface graphique de vos Items. Un point intéressant de ce contrôle est qu’il est flexible et intégrable dans d’autre contrôle tel qu’une Grid ou un ListView par exemple. Le carouselView n’est pas un dérivé du CarouselPage qui était limité par sa portée au niveau de la page et qui était moins flexible et moins performant que ce nouveau composant.

Afin de vous décrire l’intégration du CarouselView, nous réutiliserons la solution ExplorerCity que nous avons mis en place lors d’un précédent article.

Intégration du package Nuget

Il est nécessaire de vérifier que votre projet intègre au minimum la version 2.3.0 de Xamarin.Forms. Si ce n’est pas le cas, vous devrez  mettre à jour les packages de votre solution. Pour cela faite un clic droit sur la solution et cliquez sur « Update Nuget packages ».

Ensuite, il vous suffit d’intégrer le package Xamarin.Forms.CarouselView, pour cela, faite un clic droit sur les projets de votre solution et de cliquer sur « Add Nuget packages ». N’oubliez pas de cocher la case « Show pre-release packages » car le CarouselView est seulement en pre-release.

 

Dans notre exemple nous allons afficher une liste ville, et pour chacune, une liste de photos sera associé. Les photos seront alors affichés à l’aide du CarousselView.

Nous allons alors créer la classe Photo qui sera composé d’une url et d’une description.

public class Photo
{
 public string ImageUrl { get; set; }
 public string Description { get; set; }
}

Puis la classe City qui aura un id, un nom, une description, des coordonées gps et une liste de photo.

public class City
{
public int Id { get; set;}
public string Name { get; set; }
public string Description { get; set; }
public double Latitude { get; set; }
public double Longitude { get; set; }
public ObservableCollection<Photo> Photos { get; set; }
}

Nous devons maintenant ajouter une classe ViewModel qui servira de context à notre page. Pour les personnes ne connaissant pas le pattern MVVM, je vous invite à consulter cette page très instructive.

public class CitiesViewModel
 {
  public ObservableCollection<City> Cities { get; set;}

  public CitiesViewModel()
  {
   //initialisation de la liste Cities
   Cities = new ObservableCollection<City>
   {
   new City
    {
     Id = 1,
     Name = "Rouen",
     Description = "Ville de normandie",
     Latitude = 49.44323199999999,
     Longitude = 1.0999709999999823,
     Photos = new ObservableCollection<Photo>
      {
      new Photo
       {
        Description = "Place Jeanne d'arc",
        ImageUrl = "http://www.normandie-tourisme.fr/docs/6353-1-rouen-en-terrasse-philippe-deneufve-jpg.jpg"
       }, 
      new Photo
       {
        Description = "Vue aérienne",
        ImageUrl = "http://www.boalingua.ch/uploads/media_tool/images/frankreich_rouen_bruecken.jpg"
       },
      new Photo
       {
        Description = "Cathédrale",
        ImageUrl = "http://www.tourisme.fr/images/otf_offices/1832/cathedrale-de-rouen1.jpg"
       }
      }
     },
   new City
    { 
     Id = 2,
     Name = "Annecy",
     Description = "Annecy est une commune de la région Auvergne-Rhône-Alpes au sud-est de la France",
     Latitude = 45.899247,
     Longitude = 6.129383999999959,
     Photos = new ObservableCollection<Photo>
      {
       new Photo
        {
         Description = "Annecy - Ville",
         ImageUrl = "http://locmfr.fr/wp-content/uploads/2013/06/ville3HD-1170x578.jpg"
        },
       new Photo
        {
         Description = "Le lac d'Annecy",
         ImageUrl = "http://hotelannecy-lac.com/images/hotel-catalpa-lac-annecy.jpg"
        }
       }
     }
   }
 }

Une fois le ViewModel créé, il reste à l’associer à notre Binding Context de notre page.

public partial class CitiesPage : ContentPage
 {
  public CitiesPage()
  {
   InitializeComponent();
   BindingContext = new CitiesViewModel();
  }
 }

Et d’ajouter le namespace du Carousel.View dans la page XAML.

xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"

De plus, il est nécessaire d’ajouter les lignes suivante dans le fichier AssemblyInfo.cs se trouvant dans le répertoire properties de votre PCL.

using Xamarin.Forms.Xaml;
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]

Une fois cela effectué, vous pouvez intégrer  le CarouselView dans vos pages. Ici nous allons l’intégrer dans une listView afin de permettre de visualiser plusieurs photos par ville.

<ListView x:Name="lst" ItemsSource="{Binding Cities}" HasUnevenRows="true" RowHeight="300">
 <ListView.ItemTemplate>
 <DataTemplate>
 <ViewCell>
 <ViewCell.View>
 <Grid HeightRequest="300">
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="*"/>
 </Grid.RowDefinitions>
 <cv:CarouselView x:Name="CarouselZoos" ItemsSource="{Binding Photos}" HeightRequest="300" Margin="0" VerticalOptions="Start" Grid.Row="0" Grid.RowSpan="2">
 <cv:CarouselView.ItemTemplate>
 <DataTemplate>
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="*"/>
 <RowDefinition Height="Auto"/>
 </Grid.RowDefinitions>
 <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
 <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
 <Label TextColor="White" Text="{Binding Description}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
 </StackLayout>
 </Grid>
 </DataTemplate>
 </cv:CarouselView.ItemTemplate>
 </cv:CarouselView>
 <StackLayout BackgroundColor="#99000000" Padding="10" HorizontalOptions="FillAndExpand" VerticalOptions="Center" Grid.Row="0">
 <Label Text="{Binding Name}" TextColor="#ffffff" VerticalOptions="Center" HorizontalOptions="Center"/>
 </StackLayout>
 </Grid>
 </ViewCell.View>
 </ViewCell>
 </DataTemplate>
 </ListView.ItemTemplate>
 </ListView>

Et voici le résultat sur iOS :

Vous trouverez les sources de ce projet prochainement sur le GitHub.

A bientôt pour un prochain article.

Guillaume