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.

Share on facebook
Share on twitter
Share on linkedin

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

¿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

.Net Core

El nuevo portal de emplea.do

Llevo un tiempo trabajando directamente y liderando esfuerzos para sacar adelante la nueva versión del portal emplea(punto)do y debo decir que me llena de emoción saber que estamos a solo un paso de publicar la nueva versión mejorada del sitio web. El site actualmente te lleva a la nueva versión

Leer más »
Xamarin

Obtener la firma del usuario

Esta es una característica solicitada para muchas aplicaciones en el mundo corporativo, si estás trabajando en algún tipo de aplicación de procesamiento de pagos o una aplicación de entregas. También es posible que necesites la firma del usuario para confirmar que ha recibido un paquete, que se ha entregado un

Leer más »
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 »
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 »