Creando páginas desde código en Xamarin Forms

Screen Shot 2019-03-28 at 10.25.39 PM
Share on facebook
Share on twitter
Share on linkedin

Para crear una pantalla o página (voy a usar ambos términos intercambiablemente) desde el código solo debes seguir estos cuatro pasos:

  1. Crea una clase como quieras que se llame tu pantalla, por convención debe terminar con Page en el nombre.
  2. Haz que esa clase herede del tipo de página que quieras crear. El tipo más básico de página es el ContentPage. Si quieres ver los otros tipos puedes leer más aquí.
  3. En el constructor de la clase de tu página, instancia los objetos de los controles o vistas que quieras que tenga adentro. Si ya estás familiarizado con XAML del lado del código las clases de los controles se llaman igual que sus etiquetas.
  4. Asigna estos controles a la propiedad Content o Children según el tipo de página que quieras mostrar

Luego de seguir esos pasos tendrás una página lista para mostrar. Para mostrar la página tienes varias opciones:

  1. En el constructor de la clase App (en el archivo App.cs o App.xaml.cs) asígna la propiedad MainPage con el valor de una instancia de la página que quieras mostrar
  2. Sí quieres mostrarla haciendo uso de la barra de navegación puedes asignar a la propiedad MainPage una instancia de NavigationPage y pasarle tu página como parámetro. La barra superior mostrará la propiedad Title de tu página.

El código quedaría algo así:

La estructura de tu proyecto:

Este ejemplo muestra un ContentPage con un Label dentro, la estructura del proyecto a mano izquierda

Algunas cosas que tomar en cuenta:

  • La propiedad MainPage de la clase App define la página que se va a mostrar primero cuando se lance la aplicación, puede ser cualquier objeto que herede de la clase Page o en otras palabras cualquier tipo de página.
  • Cuando trabajas en XAML si miras el codebehind de tu vista o pantalla notarás el método InitializeComponent() en el constructor. Este método crea todos los objetos que definimos en el XAML osea que al final, Xamarin.Forms crea la vista en código cuando trabajamos con XAML, solo que lo hace detrás de cámara.
  • El código no es más rápido por hacer las vistas en XAML o con puro C#.
  • Sí tienes que referenciar un control desde el codebehind de un XAML lo puedes hacer asignadole la propiedad x:Name al control y referenciandolo por el mismo.
  • Solo recomendaría usar este método si necesitas generar dinámicamente la interfaz del usuario y aún así en casos bastante específcios.

¿Te gustó el artículo o tienes algún comentario? Puedes darme mention en twitter @eatskolnikov

Comparte este post con tus amigos

Share on linkedin
Share on twitter
Share on facebook

¿quieres recibir los artículos en tu correo?

Suscribete a mi boletín de correos y enterate cuando haya una nueva publicación

Otros artículos

Xamarin

Definiendo estilos para nuestras aplicaciones

El uso de estilos (Styles) puede ayudar a definir una interfaz de usuario coherente para tu aplicación y es una excelente manera de hacer que tus archivos XAML sean más legibles y mantenibles a largo plazo. Algunas características de los estilos: Son muy fáciles de definir. Se puede heredar para

Leer más »
Enmanuel Toribio hablando sobre Xamarin en codecamsdq 2019
Eventos

La Experiencia CodecampSDQ

El sábado pasado, 1 de junio, tuve el privilegio de participar como miembro del personal y orador en el CodecampSDQ. Se llevó a cabo en las instalaciones de la Universidad INTEC aquí en Santo Domingo. Este evento ha estado ocurriendo durante muchos años y se ha convertido en una especie

Leer más »
Xamarin

Cambiando la etiqueta del botón Back en iOS con Xamarin Forms

Algo de contexto He estado trabajando en la aplicación para CodecampSDQ (iOS | Android) que se celebrará en las instalaciones de Intec este 1 de junio. El código se basa en este repositorio y hemos realizado algunas adaptaciones de las que probablemente hablaré con mayor detalle más adelante. En un momento me

Leer más »
Xamarin

Áreas seguras del Layout para iOS en Xamarin Forms

Desde el lanzamiento del iPhone X, hay un “notch” en la parte superior de la pantalla en los dispositivos iOS que tiende a ser molesto porque se sobrepone al contenido de nuestra aplicación. Normalmente tendrías que agregar algún tipo de margen para evitar este problema. El mayor inconveniente con este

Leer más »
From https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=macos
Xamarin

Almacenamiento en caché de imágenes en Xamarin Forms

Alguien me preguntó sobre un problema que estaba teniendo al mostrar un ListView que tenía una imagen para cada celda. Cuando el usuario se movía por la lista, las imágenes parpadeaban y la interfaz de usuario se comportaba un poco lento. Las imágenes se estaban cargando desde internet. El problema

Leer más »