Cómo crear un CarouselView en Xamarin

Anteriormente expliqué como hacer un carouselPage y en esta ocasión vamos a conseguir el mismo efecto pero veremos como crear un carouselView en xamarin.

Qué es un CarouselView

Un carouselview es un elemento con el que conseguimos navegar entre diferentes páginas desplazando el dedo.

Xamarin CarouselView

Esto suele ser útil entre otras cosas como modo de presentación y colocarla al inicio de una aplicación tras instalarla a modo de guía de como se usar tu app.

Creando el carouselView en Xamarin

A estás alturas supongo que sabes crear un proyecto en visual studio así que no voy a explicarlo, por lo tanto una vez tengamos el proyecto creamos los siguientes archivos.

Explorador de soluciones para un carouselView en visual studio

Si observáis la imagen he creado una carpeta llamada Presentación en ella he creado 1 contentPage (intro.xaml) y 3 contentview (View1, View2 y view3).

Lo primero que vamos a hacer es decirle a visual studio que cuando arranque la aplicación no vaya al MainPage, sino a Intro.Xaml

Para ello abrimos el archivo que hay más abajo llamado App.xaml.cs y lo dejamos así:

using Carrousel.Presentacion;
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Carrousel
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new Intro();
        }
    }
}

Daros cuenta que solo he cambiado la línea

 MainPage = new MainPage();

Por la línea:

 MainPage = new Intro();

Si lo deseas puedes borrar el archivo MainPage porque ya no lo usaremos.

Bien antes de nada vamos a dividir la pantalla de tu móvil en dos partes.

La superior es donde vamos a meter las diferentes páginas con las que vamos a navegar y la parte de abajo vamos a dejarla para colocar los indicadores ( puntitos ) de las páginas, algo así:

Contenedor Grid con xamarin

Para hacer esto, lo haremos de la siguiente manera:

 <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="120" />
            </Grid.RowDefinitions> 
</Grid>

Como veis, hemos creado un contenedor Grid y dentro dos filas, a la primera fila le decimos que su altura no la sabemos, pero queremos que ocupe todo lo posible, así que le dejamos un asterisco.

La segunda fila le damos una altura concreta, yo le he dejado 120 para que se vea bien las dos partes, en tu caso coloca lo que mejor le venga a tu diseño xaml.

Recordar que en programación el índice comienza siempre por 0, así que la fila 1 y 2 realmente las debes tratar como fila 0 y 1.

Ahora metemos un carousel dentro del grid:

<CarouselView Grid.Row="0">
                    <CarouselView.ItemsSource>
                        <x:Array Type="{x:Type ContentView}">
                            <presentacion:View1 />
                            <presentacion:View2 />
                            <presentacion:View3 />
                        </x:Array>
                    </CarouselView.ItemsSource>
</CarouselView>

Explicamos el código:

  • En la primera línea le decimos que coloque el carouselView en la fila 0.
  • Despues que vamos a empezar a crear los diferentes Items, con ItemsSource.
  • Y dentro de los item le decimos que será un Array de tipo ContentView, porque nuestras páginas las hemos creado como ContentView ( vistas de contenido en español).

Las siguiente 3 líneas os preguntaréis que donde donde he sacado lo de <presentación:view1 />

Bien lo explico, debéis iros a la parte superior de vuestro código y añadir lo siguiente:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:presentacion="clr-namespace:Carrousel.Presentacion.VistasPresentacion"
             x:Class="Carrousel.Presentacion.Intro">

Hemos creado una propiedad más del ContentPage que le dice que deseamos un xmlns con el nombre de presentación ( puedes elegir otro nombre si lo prefieres), y le indico donde tengo esas páginas, en mi caso el nombre del proyecto(Carousel) seguido la carpeta Presentacion.VistasPresentación.

Es decir, deberás meter la ubicación donde tengas tus contentView, y ahora con la palabra presentación visualstudio sabe donde tenemos las páginas.

Se podría decir que llegados a este punto lo que hemos hecho es crear los datos que vamos a meterle al carousel.

A continuación antes de cerrar el carouserView de xamarin,en la línea anterior metemos lo siguiente:

 <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <ContentView Content="{Binding .}" />
                        </DataTemplate>
 </CarouselView.ItemTemplate>

En otros casos con este código le decimos que coja los datos de algún sitio, pero, ¿de donde los cogemos? pues se lo indicamos con un Data Bindig, si no sabes lo que es un Data Bindig te recomiendo que leas nuestro artículo sobre el tema, en cualquier caso te explico que hemos hecho aquí.

Le decimos que el ContenView lo tenemos en local, es decir, los datos lo hemos creado varias líneas más arriba, por lo que no tenemos que pasarle al Binding nada, solo hemos de ponerle un simple punto.

Con ellos le decimos que los datos están en el mismo lugar.

<ContentView Content="{Binding .}" />

Preparando los diseños de los contenView

Como esto es un simple ejemplo vamos a diseñar las 3 páginas lo más sencillamente posible para que solo lo comprendas.

Abrimos el primer view1.xaml y lo dejamos por ejemplo así:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Carrousel.Presentacion.VistasPresentacion.View1">
  <ContentView.Content>
      <StackLayout BackgroundColor="Orange">
          <Label Text="Lenguajesdeprogramacion.com" 
                 FontSize="20" 
                 VerticalOptions="CenterAndExpand"
                 HorizontalOptions="CenterAndExpand"
                 FontAttributes="Bold"/>
          <Label Text="1"
                  FontSize="50" 
                 VerticalOptions="Center"
                 HorizontalOptions="Center"
                 FontAttributes="Bold"/>
                 
      </StackLayout>
  </ContentView.Content>
</ContentView>

El segundo lo hacemos igual pero le cambiamos el background color y el texto del label con el numero de página al 2.

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Carrousel.Presentacion.VistasPresentacion.View2">
  <ContentView.Content>
      <StackLayout BackgroundColor="Red">
            <Label Text="Lenguajesdeprogramacion.com" 
                 FontSize="20" 
                 VerticalOptions="CenterAndExpand"
                 HorizontalOptions="CenterAndExpand"
                 FontAttributes="Bold"/>
            <Label Text="2"
                  FontSize="50" 
                 VerticalOptions="Center"
                 HorizontalOptions="Center"
                 FontAttributes="Bold"/>
        </StackLayout>
  </ContentView.Content>
</ContentView>

Y hacemos lo mismo para el view3.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Carrousel.Presentacion.VistasPresentacion.View3">
  <ContentView.Content>
      <StackLayout BackgroundColor="Yellow">
            <Label Text="Lenguajesdeprogramacion.com" 
                 FontSize="20" 
                 VerticalOptions="CenterAndExpand"
                 HorizontalOptions="CenterAndExpand"
                 FontAttributes="Bold"/>
            <Label Text="3"
                  FontSize="50" 
                 VerticalOptions="Center"
                 HorizontalOptions="Center"
                 FontAttributes="Bold"/>
        </StackLayout>
  </ContentView.Content>
</ContentView>

Si ejecutamos nuestra aplicación de momento tenemos esto:

Programando en xamarin.

No está mal verdad? ya podemos navegar entre páginas, ahora necesitamos colocar los índices de las páginas en la parte inferior.

IndicatorView Xamarin

Con indicatorView podemos indicar las propiedades como lugar, colores y tamaño del indicador, colocamos despues de la etiqueta /carouselview lo siguiente:

<Grid Grid.Row="1" BackgroundColor="Gray">
                    <IndicatorView x:Name="Indicador"
                                   IndicatorColor="Black"
                                   SelectedIndicatorColor="White"
                                   IndicatorSize="12"/>
</Grid>
  • Creamos un nuevo Grid con fondo gris en la fila 1.
  • Creamos el IndicatorView con nombre «Indicador».
  • Lo ponemos los puntos en negro y el punto que tenga la selección en blanco.
  • Y para acabar le metemos un tamaño de 12.

Muy bien, casi hemos acabado, pero de momento si ejecutas todo no te va a aparecer los indicadores porque nos faltaría decirle al carouselView en xamarin el nombre del indicador que le acabamos de asignar ahora.

Así que nos vamos arriba en el código y lo modificamos así:

  <CarouselView Grid.Row="0" IndicatorView="Indicador">

Ahora si estaría listo, dejo todo el código junto para que no tengáis problemas, solo debéis copiar y pegar en nuestro archivo Intro.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:presentacion="clr-namespace:Carrousel.Presentacion.VistasPresentacion"
             x:Class="Carrousel.Presentacion.Intro">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="120" />
            </Grid.RowDefinitions>
                <CarouselView Grid.Row="0" IndicatorView="Indicador">
                    <CarouselView.ItemsSource>
                        <x:Array Type="{x:Type ContentView}">
                            <presentacion:View1 />
                            <presentacion:View2 />
                            <presentacion:View3 />
                        </x:Array>
                    </CarouselView.ItemsSource>
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <ContentView Content="{Binding .}" />
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

                <Grid Grid.Row="1" BackgroundColor="Gray">
                    <IndicatorView x:Name="Indicador"
                                   IndicatorColor="Black"
                                   SelectedIndicatorColor="White"
                                   IndicatorSize="12"/>
                </Grid>
        </Grid>
        
</ContentPage>

OJO! recuerda que dependiendo de los nombres que has elegido para los contentView o el nombre de la carpeta donde estén va a darte error o no, si lo has nombrado igual que yo no tendrás ningún problema.

Finalizando nuestro CarouselView en Xamarin

Si todo ha ido correcto debería poder compilar la aplicación sin errores y ejecutar tu proyecto y quedando todo de la siguiente manera.

Cómo programar en xamarin.

Otro articulo que no puedo dejar de recomendar es donde explicamos como tener un listView con una imagen dentro y con Tap Gesture . Ya podamos obtener los datos del element seleccionado facilmente. Muy útil.

Si tienes alguna duda, puedes dejarme un comentario al final de este articulo. Espero que te haya servido de ayuda.

 
Resumen
CarouselView en Xamarin
Nombre del artículo
CarouselView en Xamarin
Descripción
Anteriormente expliqué como hacer un carouselPage y en esta ocasión vamos a conseguir el mismo efecto pero veremos como crear un carouselView en xamarin.
Autor
Publicador
lenguajesdeprogramacion.com
Logo

Deja un comentario