Xamarin.Forms
CarouselView - Pre-release version

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

Anmärkningar

CarouselView är en Xamarin-kontroll som kan innehålla alla slags vyer. Denna pre-release-kontroll kan endast användas i Xamarin Forms-projekt.

I exemplet från James Montemagno , på bloggen till Xamarin, används CarouselView för att visa bilder.

Just nu är CarouselView inte integrerad i Xamarin.Forms. För att använda detta i dina projekt måste du lägga till NuGet-paketet (se exemplet ovan).

Importera CarouselView

Det enklaste sättet att importera CarouselView är att använda NuGet-Packages Manager i Xamarin / Visual studio:

För att använda pre-release-paket, se till att du aktiverar kryssrutan "Visa pre-release-paket" i det vänstra hörnet.

Varje delprojekt (.iOS / .droid ./. WinPhone) måste importera detta paket.

Importera CarouselView till en XAML-sida

Det grundläggande

Infoga följande rad i rubriken ContentPage:

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

Placera CarouselView mellan <ContentPage.Content> -taggarna:

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

x: Namn ger din CarouselView ett namn som kan användas i C # -koden bakom filen. Det här är grunderna du behöver göra för att integrera CarouselView i en vy. De givna exemplen visar dig ingenting eftersom CarouselView är tom.

Skapa bindbar källa

Som exempel på en artikelkälla kommer jag att använda en observerbar samling av strängar.

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

TechGiant är en klass som kommer att innehålla namn på Technology Giants

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

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

Efter InitializeComponenten på din sida skapar du och fyller i ObsableCollection

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

Slutligen ställer TechGiants in som artikelkälla för DemoCarouselView

DemoCarouselView.ItemsSource = TechGiants;

DataTemplates

I XAML-filen, ge CarouselView en DataTemplate:

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

Definiera ett DataTemplate. I det här fallet kommer detta att vara en etikett med textbindning till artikelkällan och en grön bakgrund:

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

Det är allt! Kör programmet och se resultatet!

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow