Buscar..


Observaciones

CarouselView es un control de Xamarin que puede contener cualquier tipo de vista. Este control previo al lanzamiento solo se puede usar en proyectos de Xamarin Forms.

En el ejemplo proporcionado por James Montemagno , en el blog de Xamarin, CarouselView se usa para mostrar imágenes.

En este momento, CarouselView no está integrado en Xamarin.Forms. Para usar esto en su (s) proyecto (s), tendrá que agregar el paquete NuGet (vea el ejemplo anterior).

Importar CarouselView

La forma más sencilla de importar CarouselView es usar el Administrador de paquetes NuGet en Xamarin / Visual studio: introduzca la descripción de la imagen aquí

Para usar los paquetes de prelanzamiento, asegúrese de habilitar la casilla de verificación "Mostrar paquetes de prelanzamiento" en la esquina izquierda.

Cada subproyecto (.iOS / .droid ./. WinPhone) debe importar este paquete.

Importar CarouselView en una página XAML

Los basicos

En el encabezado de ContentPage, inserte la siguiente línea:

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

Entre las etiquetas <ContentPage.Content> coloca el CarouselView:

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

x: Nombre le dará a CarouselView un nombre, que se puede usar en el código C # detrás del archivo. Esto es lo básico que debe hacer para integrar CarouselView en una vista. Los ejemplos dados no le mostrarán nada porque CarouselView está vacío.

Creando fuente enlazable

Como ejemplo de un ItemSource, usaré un ObservableCollection de cadenas.

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

TechGiant es una clase que albergará nombres de Technology Giants.

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

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

Después del InitializeComponent de su página, cree y complete la colección Observable

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

Por fin, establezca a TechGiants para que sea la fuente de elementos de DemoCarouselView

DemoCarouselView.ItemsSource = TechGiants;

Plantillas de datos

En el archivo XAML, asigne a CarouselView una DataTemplate:

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

Definir una plantilla de datos. En este caso, se tratará de una etiqueta con un enlace de texto a la fuente de elementos y un fondo verde:

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

¡Eso es! Ejecuta el programa y ve el resultado!



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow