Compartir a través de

Selección de plantilla de datos: Aplicar estilos a los elementos en función de sus propiedades

Un DataTemplate administra el diseño personalizado de los controles de colecciones. Las plantillas de datos definen cómo se debe diseñar y aplicar estilo a cada elemento de la colección, y ese marcado se aplica a cada elemento de la colección. En este artículo se explica cómo usar un DataTemplateSelector para aplicar diferentes plantillas de datos en una colección y seleccionar qué plantilla de datos se va a usar, en función de determinadas propiedades de elemento o valores de su elección.

API importantes: DataTemplateSelector, DataTemplate

DataTemplateSelector es una clase que habilita la lógica de selección de plantillas personalizada. Permite definir reglas que especifican qué plantilla de datos se va a usar para determinados elementos de una colección. Para implementar esta lógica, cree una subclase de DataTemplateSelector en el código subyacente y defina la lógica que determina qué plantilla de datos se va a usar para qué categoría de elementos (por ejemplo, elementos de un determinado tipo o elementos con un valor de propiedad determinado, etc.). Declaras una instancia de esta clase en la sección Recursos del archivo XAML, junto con las definiciones de las plantillas de datos que vas a usar. Identificas estos recursos con un x:Key valor, lo que te permite hacer referencia a ellos en tu XAML.

Prerrequisitos

Cuándo no usar DataTemplateSelector

Por lo general, no se debe dar a todos los elementos de un control ListView o GridView un diseño o estilo completamente diferente, lo que sería un uso deficiente de un DataTemplateSelector y afectar negativamente al rendimiento.

Algunos elementos de la presentación visual de un elemento de lista se pueden controlar mediante solo una plantilla de datos, mediante el enlace de determinadas propiedades. Por ejemplo, los elementos pueden tener un icono diferente enlazando a una propiedad de origen de icono en la plantilla de datos y dando a cada elemento un valor diferente para esa propiedad de origen de icono. Esto lograría un mejor rendimiento que el uso de DataTemplateSelector.

Cuándo usar el DataTemplateSelector

Debe crear un DataTemplateSelector cuando quiera usar varias plantillas de datos en un control de recopilación. DataTemplateSelector te da la flexibilidad de hacer que ciertos elementos destaquen, a la vez que mantiene los elementos en un diseño similar. Hay muchos casos de uso en los que un DataTemplateSelector es útil y algunos escenarios en los que es mejor volver a pensar en el control y la estrategia que está usando.

Los controles de colección normalmente se enlazan a una colección de elementos que son todos de un tipo. Sin embargo, aunque los elementos pueden ser del mismo tipo, pueden tener valores diferentes para determinadas propiedades o representar significados diferentes. Algunos elementos también pueden ser más importantes que otros, o un elemento puede ser especialmente importante o diferente y tiene una necesidad de destacar visualmente. En estas situaciones, dataTemplateSelector será muy útil.

También puede enlazar a una colección que contiene diferentes tipos de elementos: la colección enlazada puede tener una combinación de cadenas, ints, objetos de clase personalizados, etc. Esto hace que DataTemplateSelector sea especialmente útil, ya que puede asignar plantillas de datos diferentes basadas en el tipo de objeto de un elemento.

Estos son algunos ejemplos de cuándo puede usar un selector de plantillas de datos:

  • Representando diferentes niveles de empleados dentro de un ListView: cada tipo o nivel de empleado puede necesitar un fondo de color diferente para ser fácilmente distintivo.
  • Representación de artículos de venta en una galería de productos que usa gridView: un elemento de venta puede necesitar un fondo rojo o una fuente de color diferente para que destaque de los artículos de precio normal.
  • Presentando las mejores y ganadoras fotos en una galería de fotos con FlipView.
  • Necesidad de representar números negativos o positivos en un ListView de forma diferente, o cadenas cortas o largas.

Crear un DataTemplateSelector

Cuando creas un selector de plantillas de datos, defines la lógica de selección de plantillas en el código y defines las plantillas de datos en el XAML.

Componente de código subyacente

Para usar un selector de plantillas de datos, primero debe crear una subclase de DataTemplateSelector (una clase que deriva de ella) en el código subyacente. En la clase, declara cada plantilla como una propiedad de la clase . A continuación, invalida el método SelectTemplateCore para incluir su propia lógica de selección de plantilla.

Este es un ejemplo de una subclase simple DataTemplateSelector denominada MyDataTemplateSelector.

public class MyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate Normal { get; set; }
    public DataTemplate Accent { get; set; }

    protected override DataTemplate SelectTemplateCore(object item)
    {
        if ((int)item % 2 == 0)
        {
            return Normal;
        }
        else
        {
            return Accent;
        }
    }
}

La MyDataTemplateSelector clase deriva de la DataTemplateSelector clase y primero define dos objetos DataTemplate : Normal y Accent. Estas son declaraciones vacías por ahora, pero se "rellenarán" con marcado en el archivo XAML.

El método SelectTemplateCore toma un objeto item (es decir, cada elemento de la colección) y se sobrescribe con reglas sobre qué DataTemplate devolver en determinadas circunstancias. En este caso, si el elemento es un número impar, recibe la Accent plantilla de datos, mientras que si es un número par que recibe la Normal plantilla de datos.

Componente XAML

En segundo lugar, debes crear una instancia de esta nueva MyDataTemplateSelector clase en la sección Recursos del archivo XAML. Todos los recursos requieren un x:Key, que se utiliza para vincularlo a la propiedad ItemTemplateSelector del control de colección (en un paso posterior). También se crean dos instancias de DataTemplate objetos y se define su diseño en la sección resources. Asignas estas plantillas de datos a las propiedades Accent y Normal que declaraste en la clase MyDataTemplateSelector.

Este es un ejemplo de los recursos XAML y el marcado necesarios:

<Page.Resources>

<DataTemplate x:Key="NormalItemTemplate" x:DataType="x:Int32">
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemChromeLowColor}">
        <TextBlock Text="{x:Bind}" />
    </Button>
</DataTemplate>

<DataTemplate x:Key="AccentItemTemplate" x:DataType="x:Int32">
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemAccentColor}">
        <TextBlock Text="{x:Bind}" />
    </Button>
</DataTemplate>

<l:MyDataTemplateSelector x:Key="MyDataTemplateSelector"
    Normal="{StaticResource NormalItemTemplate}"
    Accent="{StaticResource AccentItemTemplate}"/>

</Page.Resources>

Como puede ver anteriormente, las dos plantillas Normal de datos y Accent se definen: ambos muestran elementos como botones, pero la Accent plantilla de datos usa un pincel de color de énfasis para el fondo, mientras que la Normal plantilla de datos usa un pincel de color gris (SystemChromeLowColor). Estas dos plantillas de datos se asignan a los Normal objetos DataTemplate y Accent que son atributos de la clase MyDataTemplateSelector, creados en el código subyacente de C#.

El último paso es enlazar DataTemplateSelector a tu ItemTemplateSelector propiedad del control de colecciones (en este caso, un ListView). Esto reemplaza la necesidad de asignar un valor a la ItemTemplate propiedad .

<ListView x:Name = "TestListView"
          ItemsSource = "{x:Bind NumbersList}"
          ItemTemplateSelector = "{StaticResource MyDataTemplateSelector}">
</ListView>

Una vez compilado el código, cada elemento de la colección se ejecutará a través del método sobrescrito SelectTemplateCore en MyDataTemplateSelector, y se representará con la DataTemplate adecuada.

Importante

Cuando se usa DataTemplateSelector con un ItemsRepeater, se enlaza el DataTemplateSelector a la propiedad ItemTemplate. ItemsRepeater no tiene una ItemTemplateSelector propiedad .

Consideraciones de rendimiento de DataTemplateSelector

Cuando se usa un control ListView o GridView con una colección de datos de gran tamaño, el rendimiento de desplazamiento y movimiento panorámico puede ser un problema. Para que las colecciones de gran tamaño funcionen bien, hay algunos pasos que puede seguir para mejorar el rendimiento de las plantillas de datos. Estos se describen con más detalle en La optimización de la interfaz de usuario de ListView y GridView.

  • Reducción de elementos por elemento : mantenga el número de elementos de la interfaz de usuario de una plantilla de datos en un mínimo razonable.
  • Reciclaje de contenedores con colecciones heterogéneas
    • Usar el evento ChoosingItemContainer : este evento es una forma de alto rendimiento para usar diferentes plantillas de datos para distintos elementos. Para lograr el mejor rendimiento, debe optimizar el almacenamiento en caché y seleccionar plantillas de datos para sus datos específicos.
    • Usar un selector de plantillas de elemento : se debe evitar un selector de plantillas de elemento (DataTemplateSelector) en algunos casos debido a su impacto en el rendimiento.
  • Last updated on