Condividi tramite

Selezione del modello di dati: applicazione di stili agli elementi in base alle relative proprietà

La progettazione personalizzata dei controlli delle raccolte viene gestita da un oggetto DataTemplate. I modelli di dati definiscono il modo in cui ogni elemento deve essere disposto e in stile e tale markup viene applicato a ogni elemento della raccolta. Questo articolo illustra come usare un DataTemplateSelector per applicare modelli di dati diversi in una raccolta e selezionare il modello di dati da usare, in base a determinate proprietà o valori di elemento scelti.

API importanti: DataTemplateSelector, DataTemplate

DataTemplateSelector è una classe che abilita la logica di selezione del modello personalizzata. Consente di definire regole che specificano il modello di dati da usare per determinati elementi in una raccolta. Per implementare questa logica, creare una sottoclasse di DataTemplateSelector nel code-behind e definire la logica che determina il modello di dati da usare per la categoria di elementi(ad esempio, elementi di un determinato tipo o elementi con un determinato valore di proprietà e così via). Dichiari un'istanza di questa classe nella sezione Risorse del file XAML, insieme alle definizioni dei modelli di dati che userai. Queste risorse vengono identificate con un x:Key valore, che consente di farvi riferimento nel codice XAML.

Prerequisiti

Quando non usare un DataTemplateSelector

In genere, non è consigliabile assegnare a tutti gli elementi di un controllo ListView o GridView un layout/stile completamente diverso. Questo potrebbe essere un uso scarso di un DataTemplateSelector e influire negativamente sulle prestazioni.

Alcuni elementi della visualizzazione visiva di un elemento elenco possono essere controllati usando un solo modello di dati, tramite l'associazione di determinate proprietà. Ad esempio, gli elementi possono avere un'icona diversa associando a una proprietà di origine icona nel modello di dati e assegnando a ogni elemento un valore diverso per la proprietà di origine dell'icona. In questo modo si otterrebbero prestazioni migliori rispetto all'uso di un DataTemplateSelector.

Quando usare un oggetto DataTemplateSelector

È consigliabile creare un oggetto DataTemplateSelector quando si desidera usare più modelli di dati in un unico controllo raccolta. Un DataTemplateSelector offre la flessibilità necessaria per far risaltare determinati elementi, mantenendo gli elementi in un layout coerente. Esistono molti casi d'uso in cui un DataTemplateSelector è utile e alcuni scenari in cui è preferibile rivalutare il controllo e la strategia in uso.

I controlli di raccolta sono in genere associati a una raccolta di elementi che sono tutti di un tipo. Tuttavia, anche se gli elementi possono essere dello stesso tipo, possono avere valori diversi per determinate proprietà o rappresentare significati diversi. Alcuni elementi possono anche essere più importanti di altri, o un elemento può essere particolarmente importante o diverso e ha la necessità di distinguersi visivamente. In queste situazioni, un DataTemplateSelector sarà molto utile.

È anche possibile eseguire l'associazione a una raccolta che contiene tipi diversi di elementi. L'insieme associato può includere una combinazione di stringhe, int, oggetti classe personalizzati e altro ancora. Ciò rende DataTemplateSelector particolarmente utile in quanto può assegnare modelli di dati diversi in base al tipo di oggetto di un elemento.

Ecco alcuni esempi di quando è possibile usare un selettore di modelli di dati:

  • Rappresentazione di diversi livelli di dipendenti all'interno di un controllo ListView: ogni tipo/livello di dipendente potrebbe richiedere uno sfondo di colore diverso per essere facilmente distinguibile.
  • Rappresentazione di articoli di vendita in una raccolta di prodotti che usa gridView: un articolo di vendita potrebbe richiedere uno sfondo rosso o un tipo di carattere diverso per distinguerlo dagli articoli a prezzo normale.
  • Rappresentazione di vincitori/foto principali in una raccolta foto tramite FlipView.
  • È necessario rappresentare numeri negativi e positivi in un controllo ListView in modo diverso, oppure gestire stringhe brevi e stringhe lunghe.

Creare un DataTemplateSelector

Quando crei un selettore di modelli di dati, definisci la logica di selezione del modello nel codice e definisci i modelli di dati nel codice XAML.

Componente code-behind

Per usare un selettore di modelli di dati, creare prima di tutto una sottoclasse di DataTemplateSelector (una classe che ne deriva) nel code-behind. Nella classe si dichiara ogni modello come proprietà della classe . Quindi, si esegue l'override del metodo SelectTemplateCore per includere la logica di selezione del modello.

Di seguito è riportato un esempio di una sottoclasse semplice DataTemplateSelector denominata 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 classe deriva dalla DataTemplateSelector classe e definisce prima due oggetti DataTemplate : Normal e Accent. Queste sono dichiarazioni vuote per il momento, ma verranno "compilate" con markup nel file XAML.

Il metodo SelectTemplateCore accetta un elemento oggetto, ad esempio ogni elemento della raccolta, e viene sovrascritto con regole che determinano quale DataTemplate restituire in quali circostanze. In questo caso, se l'elemento è un numero dispari, riceve il Accent modello di dati, mentre se è un numero pari riceve il Normal modello di dati.

Componente XAML

In secondo luogo, devi creare un'istanza di questa nuova MyDataTemplateSelector classe nella sezione Risorse del file XAML. Tutte le risorse richiedono un x:Key oggetto, che viene usato per associarlo alla proprietà del controllo della tua collezione (in un passo successivo). È anche possibile creare due istanze di DataTemplate oggetti e definirne il layout nella sezione delle risorse. Assegni questi modelli di dati alle proprietà Accent e Normal che hai dichiarato nella classe MyDataTemplateSelector.

Ecco un esempio di risorse XAML e markup necessari:

<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>

Come si può notare sopra, i due modelli Normal di dati e Accent sono definiti, entrambi visualizzano gli elementi come pulsanti, ma il Accent modello di dati usa un pennello colore principale per lo sfondo, mentre il Normal modello di dati usa un pennello di colore grigio (SystemChromeLowColor). Questi due modelli di dati vengono quindi assegnati agli oggetti DataTemplate Normal e Accent che sono attributi della classe MyDataTemplateSelector, creati nel codice sottostante C#.

L'ultimo passaggio consiste nell'associare il DataTemplateSelector alla proprietà ItemTemplateSelector del controllo delle raccolte, in questo caso, un ListView. Ciò sostituisce la necessità di assegnare un valore alla ItemTemplate proprietà .

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

Dopo la compilazione del codice, ogni elemento della raccolta verrà passato tramite il metodo sottoposto a override SelectTemplateCore in MyDataTemplateSelector, e verrà reso con il DataTemplate appropriato.

Importante

Quando si usa DataTemplateSelector con ItemsRepeater, si associa il DataTemplateSelector alla proprietà ItemTemplate. ItemsRepeater non ha una ItemTemplateSelector proprietà.

Considerazioni sulle prestazioni di DataTemplateSelector

Quando si usa un controllo ListView o GridView con una raccolta di dati di grandi dimensioni, le prestazioni di scorrimento e panoramica possono costituire un problema. Per garantire prestazioni ottimali per le raccolte di grandi dimensioni, è possibile eseguire alcuni passaggi per migliorare le prestazioni dei modelli di dati. Queste informazioni sono descritte in modo più dettagliato nell'ottimizzazione dell'interfaccia utente listView e GridView.

  • Riduzione degli elementi per elemento: mantenere il numero di elementi dell'interfaccia utente in un modello di dati al minimo ragionevole.
  • Riciclo dei contenitori con raccolte eterogenee
    • Usare l'evento ChoosingItemContainer : questo evento è un modo ad alte prestazioni per usare modelli di dati diversi per elementi diversi. Per ottenere prestazioni ottimali, è consigliabile ottimizzare la memorizzazione nella cache e selezionare modelli di dati per i dati specifici.
    • Usare un selettore di modelli di elemento: un selettore di modelli di elemento (DataTemplateSelector) deve essere evitato in alcune istanze a causa dell'impatto sulle prestazioni.
  • Last updated on