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 *