Saltar al contenido

Como crear un carousel page en xamarin

14 noviembre, 2018
Xamarin Carousel page

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 línea 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 xamarin

Si deseas hacer lo mismo pero con los típicos puntitos en la parte inferior indicando en que página estás de la navegación lo puedes hacer con un carouselView en xamarin.

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

No olvides que tenemos más artículos ( como encriptar texto en c# )donde podrás aprender más cosas sobre este fantástico lenguaje de programación como es c# con xamarin

Resumen
Como crear un carousel page en xamarin
Nombre del artículo
Como crear un carousel page en xamarin
Descripción
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 <strong>carousel page en xamarin</strong> y lo hago de la siguiente manera
Autor
Publicador
lenguajesdeprogramacion.com
Logo
Configuraciones