Xamarin.Forms
CarouselView - Version préliminaire

.NET Framework Android ASP.NET C# Language F# firebase iOS uwp wpf Xamarin.iOS

Remarques

CarouselView est un contrôle Xamarin qui peut contenir tout type de vue. Ce contrôle préalable à la publication ne peut être utilisé que dans les projets Xamarin Forms.

Dans l'exemple fourni par James Montemagno , sur le blog de Xamarin, CarouselView est utilisé pour afficher des images.

CarouselView n'est actuellement pas intégré à Xamarin.Forms. Pour utiliser ceci dans vos projets, vous devrez ajouter le NuGet-Package (voir exemple ci-dessus).

Importer CarouselView

La méthode la plus simple pour importer CarouselView consiste à utiliser NuGet-Packages Manager dans Xamarin / Visual studio:

Pour utiliser des packages de pré-version, assurez-vous d'activer la case à cocher "Afficher les packages de pré-version" dans le coin gauche.

Chaque sous-projet (.iOS / .droid ./. WinPhone) doit importer ce paquet.

Importer CarouselView dans une page XAML

Les bases

Dans l'en-tête de ContentPage, insérez la ligne suivante:

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

Entre les balises <ContentPage.Content>, placez CarouselView:

<cv:CarouselView x:Name="DemoCarouselView">
</cv:CarouselView>

x: Name donnera un nom à votre CarouselView, qui peut être utilisé dans le code C # derrière le fichier. Ce sont les bases que vous devez faire pour intégrer CarouselView dans une vue. Les exemples donnés ne vous montreront rien car le CarouselView est vide.

Créer un source pouvant être lié

Comme exemple d'un ItemSource, je vais utiliser une collection ObservableCollection de chaînes.

public ObservableCollection<TechGiant> TechGiants { get; set; }

TechGiant est une classe qui hébergera les noms des géants de la technologie

public class TechGiant
{
    public string Name { get; set; }

    public TechGiant(string Name)
    {
        this.Name = Name;
    }
}

Après le composant InitializeComponent de votre page, créez et remplissez le fichier ObservableCollection

TechGiants = new ObservableCollection<TechGiant>();
TechGiants.Add(new TechGiant("Xamarin"));
TechGiants.Add(new TechGiant("Microsoft"));
TechGiants.Add(new TechGiant("Apple"));
TechGiants.Add(new TechGiant("Google"));

Enfin, définissez TechGiants comme ItemSource de DemoCarouselView

DemoCarouselView.ItemsSource = TechGiants;

DataTemplates

Dans le fichier XAML, attribuez à CarouselView un DataTemplate:

<cv:CarouselView.ItemTemplate>
</cv:CarouselView.ItemTemplate>

Définir un DataTemplate. Dans ce cas, ce sera une étiquette avec du texte lié au itemource et un arrière-plan vert:

<DataTemplate>
    <Label Text="{Binding Name}" BackgroundColor="Green"/>
</DataTemplate>

C'est tout! Exécutez le programme et voir le résultat!

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow