Xamarin.Forms
CarouselView - Vorabversion
Suche…
Bemerkungen
CarouselView ist ein Xamarin-Steuerelement, das alle Arten von Ansichten enthalten kann. Diese Vorabversionskontrolle kann nur in Xamarin Forms-Projekten verwendet werden.
In dem von James Montemagno bereitgestellten Beispiel wird auf dem Blog von Xamarin CarouselView zum Anzeigen von Bildern verwendet.
In diesem Moment ist CarouselView nicht in Xamarin.Forms integriert. Um dies in Ihren Projekten zu verwenden, müssen Sie das NuGet-Package hinzufügen (siehe Beispiel oben).
Karussellansicht importieren
Der einfachste Weg, CarouselView zu importieren, ist die Verwendung des NuGet-Packages Manager in Xamarin / Visual Studio:
Um Vorabversionen zu verwenden, aktivieren Sie das Kontrollkästchen "Vorab-Pakete anzeigen" in der linken Ecke.
Jedes Unterprojekt (.iOS / .droid ./. WinPhone) muss dieses Paket importieren.
CarouselView in eine XAML-Seite importieren
Die Grundlagen
Fügen Sie in der Überschrift von ContentPage folgende Zeile ein:
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
Platzieren Sie zwischen den <ContentPage.Content> -Tags die CarouselView:
<cv:CarouselView x:Name="DemoCarouselView">
</cv:CarouselView>
x: Name gibt Ihrem CarouselView einen Namen, der im C # -Code hinter der Datei verwendet werden kann. Dies sind die Grundlagen, die Sie für die Integration von CarouselView in eine Ansicht benötigen. Die angegebenen Beispiele zeigen Ihnen nichts, da die CarouselView leer ist.
Bindbare Quelle erstellen
Als Beispiel für eine ItemSource verwende ich eine ObservableCollection von Strings.
public ObservableCollection<TechGiant> TechGiants { get; set; }
TechGiant ist eine Klasse, die Namen von Technology Giants hostet
public class TechGiant
{
public string Name { get; set; }
public TechGiant(string Name)
{
this.Name = Name;
}
}
Erstellen Sie nach der InitializeComponent Ihrer Seite die ObservableCollection, und füllen Sie sie aus
TechGiants = new ObservableCollection<TechGiant>();
TechGiants.Add(new TechGiant("Xamarin"));
TechGiants.Add(new TechGiant("Microsoft"));
TechGiants.Add(new TechGiant("Apple"));
TechGiants.Add(new TechGiant("Google"));
Legen Sie schließlich TechGiants als ItemSource für die DemoCarouselView fest
DemoCarouselView.ItemsSource = TechGiants;
DataTemplates
In der XAML-Datei geben Sie der CarouselView eine DataTemplate:
<cv:CarouselView.ItemTemplate>
</cv:CarouselView.ItemTemplate>
Definieren Sie eine DataTemplate. In diesem Fall ist dies ein Label mit Textbindung an die Artikelquelle und ein grüner Hintergrund:
<DataTemplate>
<Label Text="{Binding Name}" BackgroundColor="Green"/>
</DataTemplate>
Das ist es! Führen Sie das Programm aus und sehen Sie das Ergebnis!