Resumen del capítulo 25. Variedades de páginas

  • Artículo

Descargar ejemploDescargar el ejemplo

Nota

Este libro se publicó en la primavera de 2016 y no se ha actualizado desde entonces. Gran parte del libro sigue siendo útil, pero algunos de los materiales están anticuados y algunos temas ya no son completamente correctos o completos.

Hasta ahora se han visto dos clases que se derivan de Page: ContentPage y NavigationPage. En este capítulo se presentan otras dos:

  • MasterDetailPage administra dos páginas, una maestra y una de detalles.
  • TabbedPage administra varias páginas secundarias a las que se tiene acceso a través de pestañas.

Estos tipos de página proporcionan opciones de navegación más sofisticadas que las NavagationPage que se describen en Capítulo 24. Navegación de páginas.

Principal y detalles

MasterDetailPage define dos propiedades de tipo Page: Master y Detail. Por lo general, cada una de estas propiedades se establece en ContentPage. MasterDetailPage muestra estas dos páginas y cambia entre ellas.

Hay dos maneras fundamentales de cambiar entre estas dos páginas:

  • modo de división: la página maestra y la de detalles se muestran en paralelo.
  • modo de elemento flotante: la página de detalles cubre, o cubre parcialmente, la página maestra.

Hay varias variaciones del enfoque elemento flotante (deslizar, superponer e intercambiar), pero suelen depender de la plataforma. Puede establecer la propiedad MasterDetailBehavior de MasterDetailPage en un miembro de la enumeración MasterBehavior:

Sin embargo, esta propiedad no tiene ningún efecto en los teléfonos. Los teléfonos siempre tienen un comportamiento de elemento flotante. Solo las tabletas y las ventanas de escritorio pueden tener un comportamiento de división.

Exploración de los comportamientos

El ejemplo MasterDetailBehaviors permite experimentar con el comportamiento predeterminado en distintos dispositivos. El programa contiene dos derivados de ContentPage independientes para la página maestra y de detalles (con una propiedad Title establecida en ambas) y otra clase que se deriva de MasterDetailPage que los combina. La página de detalles se incluye en NavigationPage porque el programa de UWP no funcionará sin ella.

Las plataformas Windows 8.1 y Windows Phone  8.1 requieren que un mapa de bits se establezca en la propiedad Icon de la página maestra.

Vuelta al cole

El ejemplo SchoolAndDetail toma un enfoque algo diferente para construir el programa con el fin de mostrar los alumnos de la biblioteca SchoolOfFineArt.

Las propiedades Master y Detail se definen con árboles visuales en el archivo SchoolAndDetailPage.xaml, que se deriva de MasterDetailPage. Esta disposición permite establecer enlaces de datos entre las páginas maestra y de detalles.

Ese archivo XAML también establece la propiedad IsPresented de MasterDetailPage en True. Esto hace que la página maestra se muestre en el inicio; de forma predeterminada, se muestra la página de detalles. El archivo SchoolAndDetailPage.xaml.cs establece IsPresented en false cuando se selecciona un elemento de ListView en la página maestra. A continuación, se muestra la página de detalles:

detalles de school and detailde la página de

Su propia interfaz de usuario

Aunque Xamarin.Forms proporciona una interfaz de usuario para cambiar entre las vistas maestra y de detalles, puede proporcionar la suya propia. Para ello:

  • Establezca la propiedad IsGestureEnabled en false para deshabilitar el deslizamiento rápido.
  • Invalide el método ShouldShowToolbarButton y devuelva false para ocultar los botones de la barra de herramientas en Windows 8.1 y Windows Phone 8.1.

A continuación, debe proporcionar un medio para cambiar entre las páginas maestra y de detalles, como se muestra en el ejemplo ColorsDetail.

En el ejemplo MasterDetailTaps se muestra otro enfoque que usa TapGestureRecognizer en las páginas maestra y de detalles.

TabbedPage

TabbedPage es una colección de páginas que se pueden cambiar entre las pestañas. Se deriva de MultiPage<Page> y no define ninguna propiedad o método público propio. MultiPage<T>, sin embargo, define una propiedad:

Esta colección Children se rellena con objetos de página.

Otro enfoque permite definir el los elementos secundarios de TabbedPage de forma muy similar a ListView con estas dos propiedades que generan automáticamente las fichas:

Sin embargo, este enfoque no funciona bien en iOS cuando la colección contiene más de unos pocos elementos.

MultiPage<T> define dos propiedades más que permiten realizar un seguimiento de la página que se está viendo actualmente:

  • CurrentPage de tipo T, que hace referencia a la página.
  • SelectedItem de tipo Object, que hace referencia al objeto de la colección ItemsSource.

MultiPage<T> también define dos eventos:

Fichas discretas

El ejemplo DiscreteTabbedColors consta de tres fichas que muestran los colores de tres maneras diferentes. Cada pestaña es un derivado de ContentPage y, a continuación, el derivado de TabbedPageDiscreteTabbedColorsPage.xaml combina las tres páginas.

Para cada página que aparece en TabbedPage, se requiere la propiedad Title para especificar el texto en la pestaña, y Apple Store requiere que se use también un icono, por lo que la propiedad Icon se establece para iOS:

de pantalla triple de TabbedPage de colores

El ejemplo de StudentNotes consta de una página principal en la que se enumeran todos los alumnos. Cuando se pulsa en un estudiante, se va hasta un derivado de TabbedPage, StudentNotesDataPage, que incorpora tres objetos ContentPage en su árbol visual, uno de los cuales permite escribir algunas notas para ese alumno.

Uso de ItemTemplate

El ejemplo MultiTabbedColor usa la NamedColor clase en la Xamarin.Formsbiblioteca Book.Toolkit . El archivo MultiTabbedColorsPage. Xaml establece la propiedad DataTemplate de TabbedPage en un árbol visual que empieza por ContentPage y contiene enlaces a propiedades de NamedColor (incluido un enlace a la propiedad Title).

Sin embargo, esto es problemático en iOS. Solo se pueden mostrar algunos elementos y no hay ninguna manera adecuada de dotarles de iconos.