Xamarin.Forms
CarouselView - Pre-releaseversie
Zoeken…
Opmerkingen
CarouselView is een Xamarin Control die elk soort weergave kan bevatten. Deze pre-releasecontrole kan alleen worden gebruikt in Xamarin Forms-projecten.
In het voorbeeld van James Montemagno , op de blog van Xamarin, wordt CarouselView gebruikt om afbeeldingen weer te geven.
Op dit moment is CarouselView niet geïntegreerd in Xamarin.Forms. Om dit in uw project (en) te gebruiken, moet u het NuGet-pakket toevoegen (zie voorbeeld hierboven).
Carrouselweergave importeren
De eenvoudigste manier om CarouselView te importeren, is door NuGet-Packages Manager in Xamarin / Visual Studio te gebruiken:
Als u pre-releasepakketten wilt gebruiken, schakelt u het selectievakje 'Pre-releasepakketten weergeven' in de linkerhoek in.
Elk subproject (.iOS / .droid ./. WinPhone) moet dit pakket importeren.
CarouselView importeren in een XAML-pagina
De basis
Voeg in de kop van ContentPage de volgende regel in:
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
Plaats tussen de <ContentPage.Content> -tags de CarouselView:
<cv:CarouselView x:Name="DemoCarouselView">
</cv:CarouselView>
x: Naam geeft uw CarouselView een naam, die kan worden gebruikt in de C # -code achter het bestand. Dit is de basis die u moet doen om CarouselView in een weergave te integreren. De gegeven voorbeelden laten u niets zien omdat de CarouselView leeg is.
Bindbare bron maken
Als voorbeeld van een ItemSource gebruik ik een ObservableCollection van strings.
public ObservableCollection<TechGiant> TechGiants { get; set; }
TechGiant is een klasse die de namen van Technology Giants zal hosten
public class TechGiant
{
public string Name { get; set; }
public TechGiant(string Name)
{
this.Name = Name;
}
}
Na de initialisatiecomponent van uw pagina maakt en vult u de 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"));
Stel TechGiants uiteindelijk in als de ItemSource van de DemoCarouselView
DemoCarouselView.ItemsSource = TechGiants;
DataTemplate
Geef de CarouselView in het XAML - bestand een DataTemplate:
<cv:CarouselView.ItemTemplate>
</cv:CarouselView.ItemTemplate>
Definieer een DataTemplate. In dit geval is dit een label met tekstbinding aan de itemsource en een groene achtergrond:
<DataTemplate>
<Label Text="{Binding Name}" BackgroundColor="Green"/>
</DataTemplate>
Dat is het! Start het programma en zie het resultaat!