harset="UTF-8"> ūüďĪ Xamarin: Como crear un carouselPage deslizante en tu app

Xamarin: Como crear un carouselPage deslizante en tu app


Como usar el CarouselPage de Xamarin

Si 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 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.

xamarin carousel page

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

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:

xamarin carousel page Paso 4Welcome to xamarinY con esto ya lo tendríamos todo, espero que os sirva de ayuda y si te ha gustado califica el  articulo.

Punt√ļa este articulo

Y si necesitas más información haz clic en carouselPage para ver la documentación oficial 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 *