Resumen del capítulo 12. Estilos

  • Artículo

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.

En Xamarin.Forms, los estilos permiten que varias vistas compartan una colección de valores de propiedad. Esto reduce el marcado y permite mantener temas visuales coherentes.

Los estilos casi siempre se definen y se consumen en el marcado. Se crea una instancia de un objeto de tipo Style en un diccionario de recursos y, a continuación, se establece en la propiedad Style de un elemento visual mediante una extensión de marcado StaticResource o DynamicResource.

Estilo básico

Style requiere que su TargetType se establezca en el tipo del objeto visual al que se aplica. Cuando se crea una instancia de un Style en un diccionario de recursos (como es habitual), también se requiere un atributo x:Key.

Style tiene una propiedad de contenido de tipo Setters, que es una colección de objetos Setter. Cada Setter asocia un Property con Value.

En XAML, el valor Property es el nombre de una propiedad de CLR (como la propiedad Text de Button) pero la propiedad con estilo debe estar respaldada por una propiedad enlazable. Además, la propiedad se debe definir en la clase indicada por el valor TargetType, o heredada por esa clase.

Puede especificar el valor de Value mediante el elemento de propiedad <Setter.Value>. Esto le permite establecer Value en un objeto que no se puede expresar en una cadena de texto, o en un objeto OnPlatform, o en un objeto del que se ha creado una instancia mediante x:Arguments o x:FactoryMethod. La propiedad Value también se puede establecer con una expresión StaticResource en otro elemento del diccionario.

El programa BasicStyle muestra la sintaxis básica y muestra cómo hacer referencia a Style con una extensión de marcado StaticResource:

Captura de pantalla triple de estilo básico

El objeto Style y cualquier objeto creado en el objeto Style como un valor Value se comparten entre todas las vistas que hacen referencia a ese Style. Style no puede contener nada que no se pueda compartir, como un derivado de View.

Los controladores de eventos no se pueden establecer en un Style. No se puede establecer la propiedad GestureRecognizers en Style porque no está respaldada por una propiedad enlazable.

Estilos en el código

Aunque no es habitual, puede crear instancias de objetos Style en el código, e iniciarlos. Esto se muestra en el ejemplo BasicStyleCode.

Herencia de estilo

Style tiene una propiedad BasedOn que se puede establecer en una extensión de marcado StaticResource que hace referencia a otro estilo. Esto permite que los estilos hereden de estilos anteriores y agreguen o reemplacen la configuración de propiedades. En el ejemplo StyleInheritance se muestra esto.

Si Style2 se basa en Style1, TargetType de Style2 debe ser el mismo que Style1 o derivarse de Style1. El diccionario de recursos en el que se almacena Style1 debe ser el mismo diccionario de recursos de Style2 o un diccionario de recursos situado más arriba en el árbol visual.

Estilos implícitos

Si el elemento Style de un diccionario de recursos no tiene una configuración de atributo de x:Key, se le asigna automáticamente una clave de diccionario y el objeto Style se convierte en un estilo implícito. Una vista sin un valor de Style y cuyo tipo coincida exactamente con TargetType buscará ese estilo, como se muestra en el ejemplo ImplicitStyle.

Un estilo implícito puede derivarse de Style con un valor x:Key, pero no al revés. No se puede hacer referencia explícita a un estilo implícito.

Puede implementar tres tipos de jerarquías con estilos y BasedOn:

  • De los estilos definidos en Application y Page hacia abajo hasta los estilos definidos en los diseños inferiores del árbol visual.
  • De los estilos definidos para las clases base como VisualElement y View a los estilos definidos para clases concretas.
  • De los estilos con claves de diccionario explícitas a estilos implícitos.

Estas jerarquías se muestran en el ejemplo StyleHierarchy.

Estilos dinámicos

DynamicResource puede hacer referencia a un estilo de un diccionario de recursos, en lugar de StaticResource. Esto convierte al estilo en un estilo dinámico. Si el estilo se reemplaza en el diccionario de recursos por otro estilo con la misma clave, las vistas que hacen referencia a ese estilo con DynamicResource cambian automáticamente. Además, la ausencia de una entrada de diccionario con la clave especificada hará que StaticResource genere una excepción pero no DynamicResource.

Puede usar esta técnica para cambiar de forma dinámica el estilo o los temas, como se muestra en el ejemplo DynamicStyles.

Sin embargo, no puede establecer la propiedad BasedOn en una extensión de composición de DynamicResource porque BasedOn no está respaldado por una propiedad enlazable. Para derivar un estilo dinámicamente, no establezca BasedOn. En su lugar, establezca la propiedad BaseResourceKey en la clave del diccionario del estilo del que desea derivar. En el ejemplo DynamicStylesInheritance se muestra esta técnica.

Estilos de dispositivo

La clase anidada Device.Styles define doce campos estáticos de solo lectura para seis estilos con TargetType de Label que puede usar para los tipos comunes de usos de texto.

Seis de estos campos son de tipo Style que puede establecer directamente en una propiedad Style en el código:

Los otros seis campos son del tipo string y se pueden usar como claves de diccionario para los estilos dinámicos:

Estos estilos se muestran en el ejemplo DeviceStylesList.