Como crear un carousel page en xamarin

Como usar el Carousel page.

Quieres poder navegar por tu aplicación entre páginas deslizando el dedo de izquierda a derecha o viceversa y ver tus páginas pasando?. La forma más sencilla que conozco es creando un carousel page en xamarin y lo hago de la siguiente manera:

Partimos de que tienes ya un proyecto creado y tienes un archivo MainPage.xaml que es la página principal de tu aplicación.

Es posible que tu le hayas puesto otro nombre, pero por defecto Xamarin le da este nombre.

Detalles del código c#

A continuación debes crear otra página de contenido o ContenPage. Así que sobre tu solución pulsamos botón derecho/Agregar/Nuevo elemento/Xamarin.Forms y eliges Página de contenido (o si tienes tu visual studio en inglés Content Page) y le das un nombre. Por ejemplo
Page1.xaml

xamarin carousel page paso 2

Empieza lo divertido.

Hasta este punto entendemos que ya tenemos la página principal MainPage.xaml y la segunda página de navegación Page1.xaml. Ahora sólo nos falta implementar la funcionalidad de deslizar ambas páginas para navegar entre ellas.

Para terminar tan sólo tenemos que ir al archivo App.xaml.cs y dentro del constructor añadir lo siguiente:

Creamos un nuevo objeto carouselPage de la clase CarouselPage();

CarouselPage carouselPage = new CarouselPage();

Añadimos las páginas que estarán dentro del carousel

carouselPage.Children.Add(new MainPage());
carouselPage.Children.Add(new Page1());

Y asignamos el objeto a nuestro MainPage

MainPage = new NavigationPage(carouselPage);

Podrás comprobar que si tu proyecto lo acabas de crear, tengas una linea que ponga:

MainPage = new MainPage();

Como muestra en la siguiente imagen:

xamarin carousel page paso 3

Esta linea debes eliminarla ya que lo que nos interesa es asignar el objeto carouselPage a nuestra página no instanciar una MainPage().

Con esto ya podrás iniciar tu aplicación y comprobar que si en tu página principal ( MainPage ) deslizas con el dedo de derecha a izquierda aparece el contenido de tu Page1.xaml.

Pero como nota adicional vamos a cambiar un poco la segunda página ya que xamarin habrá creado ambas páginas con sus valores por defecto y no veremos el cambio.

Así dentro de Page1.xaml añadiremos el atributo BackgroudColor = «Red» a la etiqueta ContenPage y cambiaremos el texto del Label quedando algo como esto:

Detalles del código c#Welcome to xamarinY con esto ya lo tendríamos todo, espero que os sirva de ayuda y si te ha gustado califica el  articulo.

Y si necesitas más información haz clic en carousel page para ver la documentación de xamarin.

También te podría gustar...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *