Seleção de modelos de dados: Estilizar itens com base nas suas propriedades

O design personalizado dos controlos das coleções é gerido por um DataTemplate. Os modelos de dados definem como cada item deve ser disposto e estilizado, e essa marcação é aplicada a todos os itens da coleção. Este artigo explica como usar um DataTemplateSelector para aplicar diferentes modelos de dados numa coleção e selecionar qual modelo de dados usar, com base em certas propriedades ou valores de itens à sua escolha.

APIs importantes: DataTemplateSelector, DataTemplate

DataTemplateSelector é uma classe que permite uma lógica personalizada de seleção de templates. Permite-te definir regras que especificam qual modelo de dados usar para certos itens numa coleção. Para implementar esta lógica, cria-se uma subclasse de DataTemplateSelector no code-behind e define-se a lógica que determina qual modelo de dados usar para que categoria de itens (por exemplo, itens de um certo tipo ou itens com determinado valor de propriedade, etc). Declaras uma instância desta classe na secção Recursos do teu ficheiro XAML, juntamente com as definições dos modelos de dados que vais usar. Identificas esses recursos com um x:Key valor, que te permite referencia-los no teu XAML.

Pré-requisitos

• Como usar e criar um controlo de coleção, como um ListView ou GridView.
• Como personalizar o aspeto dos seus itens usando um DataTemplate.

Quando não usar um DataTemplateSelector

De um modo geral, não deve dar a cada item numa ListView ou GridView um layout/estilo completamente diferente – isto seria uma má utilização de um DataTemplateSelector e afetaria negativamente o desempenho.

Certos elementos da exibição visual de um item de lista podem ser controlados usando apenas um modelo de dados, através da atribuição de certas propriedades. Por exemplo, cada item pode ter um ícone diferente ao atribuir-se a uma propriedade de origem de ícone no template de dados, e atribuir a cada item um valor diferente para essa propriedade de origem de ícones. Isto proporcionaria melhor desempenho do que usar um DataTemplateSelector.

Quando usar um DataTemplateSelector

Deves criar um DataTemplateSelector quando quiseres usar múltiplos templates de dados num único controlo de coleção. A DataTemplateSelector dá-te a flexibilidade de fazer certos itens destacarem-se, mantendo-os numa disposição semelhante. Existem muitos casos de uso em que um DataTemplateSelector é útil, e alguns cenários em que é melhor repensar o controlo e a estratégia que está a usar.

Os controlos de coleção estão normalmente ligados a uma coleção de itens que são todos de um mesmo tipo. No entanto, mesmo que os itens possam ser do mesmo tipo, podem ter valores diferentes para certas propriedades ou representar significados distintos. Certos itens também podem ser mais importantes do que outros, ou um pode ser particularmente importante ou diferente e ter necessidade de se destacar visualmente. Nestas situações, um DataTemplateSelector será muito útil.

Também podes ligar a uma coleção que contenha diferentes tipos de itens – a coleção encadernada pode ter uma mistura de strings, ints, objetos de classe personalizados e mais. Isto torna o DataTemplateSelector especialmente útil, pois pode atribuir diferentes modelos de dados com base no tipo de objeto de um item.

Aqui estão alguns exemplos de quando pode usar um seletor de modelos de dados:

• Representar diferentes níveis de colaboradores dentro de uma Vista de Lista – cada tipo/nível de colaborador pode precisar de um fundo de cor diferente para ser facilmente distinguível.
• Representar artigos em promoção numa galeria de produtos que utiliza um GridView – um artigo em promoção pode precisar de fundo vermelho ou de uma fonte de cor diferente para se destacar dos artigos de preço normal.
• Representar vencedores/melhores fotos numa galeria de fotos usando o FlipView.
• É preciso representar números negativos/positivos numa ListView de forma diferente, ou cadeias curtas/longas.

Criar um DataTemplateSelector

Quando cria um seletor de modelos de dados, define a lógica de seleção de modelos no seu código e define os modelos de dados no seu XAML.

Componente por trás do código

Para usar um seletor de template de dados, cria primeiro uma subclasse de DataTemplateSelector (uma classe que deriva dele) no seu code-behind. Na sua classe, declara cada modelo como uma propriedade da classe. Depois, sobrescreve o método SelectTemplateCore para incluir a sua própria lógica de seleção de templates.

Aqui está um exemplo de uma subclasse simples DataTemplateSelector chamada 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;
        }
    }
}

A MyDataTemplateSelector classe deriva da DataTemplateSelector classe e define primeiro dois objetos DataTemplate : Normal e Accent. Estas são declarações vazias por agora, mas serão "preenchidas" com marcação no ficheiro XAML.

O método SelectTemplateCore recebe um objeto item (ou seja, cada item da coleção) e é redefinido por regras sobre quais DataTemplate devolver em que circunstâncias. Neste caso, se o item for um número ímpar, recebe o Accent modelo de dados, enquanto se for um número par, recebe o Normal modelo de dados.

Componente XAML

Em segundo lugar, deve criar uma instância desta nova MyDataTemplateSelector classe na secção de Recursos do seu ficheiro XAML. Todos os recursos requerem um x:Key, que será usado para ligá-lo à propriedade ItemTemplateSelector do controlo da coleção (num passo posterior). Também crias duas instâncias de DataTemplate objetos e defines a sua disposição na secção de recursos. Atribuis estes templates de dados às propriedades Accent e Normal que declaraste na classe MyDataTemplateSelector.

Aqui está um exemplo dos recursos e marcações XAML necessários:

<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 pode ver acima, os dois templates Normal de dados e Accent estão definidos – ambos mostram os itens como botões, no entanto o Accent template de dados usa um pincel de cor de destaque para o fundo, enquanto o Normal template de dados usa um pincel de cor cinzenta (SystemChromeLowColor). Estes dois modelos de dados são então atribuídos aos objetos DataTemplate Normal e Accent que são atributos da classe MyDataTemplateSelector, criados no ficheiro code-behind em C#.

O último passo é ligar o seu DataTemplateSelector à propriedade ItemTemplateSelector do seu controlo de coleções (neste caso, um ListView). Isto substitui a necessidade de atribuir um valor à ItemTemplate propriedade.

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

Depois de compilar o seu código, cada item da coleção será processado pelo método sobrescrito SelectTemplateCore em MyDataTemplateSelector, e será renderizado com o DataTemplate apropriado.

Considerações de desempenho do DataTemplateSelector

Quando se usa um ListView ou GridView com uma grande coleção de dados, o desempenho do scroll e da panorâmica pode ser uma preocupação. Para manter as grandes coleções a funcionar bem, existem alguns passos que pode tomar para melhorar o desempenho dos seus modelos de dados. Estes são descritos com mais detalhe na otimização da interface do ListView e GridView.

• Redução de elementos por item - Mantenha o número de elementos UI num modelo de dados num mínimo razoável.
• Reciclagem de contentores com coleções heterogéneas
  • Use o evento ChoosingItemContainer - Este evento é um método de alto desempenho para usar diferentes modelos de dados para diferentes itens. Para alcançar o melhor desempenho, deve otimizar a cache e selecionar modelos de dados para os seus dados específicos.
  • Use um seletor de template de item - Um seletor de template de item (DataTemplateSelector) deve ser evitado em alguns casos devido ao seu impacto no desempenho.