Sélection du modèle de données : mise en forme des éléments selon leurs propriétés

La conception personnalisée des contrôles de collections est gérée par un DataTemplate. Les modèles de données définissent la façon dont chaque élément doit être disposé et mis en forme, et ce balisage est appliqué à chaque élément de la collection. Cet article explique comment utiliser un DataTemplateSelector pour appliquer différents modèles de données sur une collection et sélectionner le modèle de données à utiliser, en fonction de certaines propriétés ou valeurs d’élément de votre choix.

API importantes : DataTemplateSelector, DataTemplate

DataTemplateSelector est une classe qui active la logique de sélection de modèle personnalisée. Il vous permet de définir des règles qui spécifient le modèle de données à utiliser pour certains éléments d’une collection. Pour implémenter cette logique, vous créez une sous-classe de DataTemplateSelector dans votre code-behind et définissez la logique qui détermine le modèle de données à utiliser pour quelle catégorie d’éléments (par exemple, les éléments d’un certain type ou d’éléments avec une certaine valeur de propriété, etc.). Vous déclarez une instance de cette classe dans la section Ressources de votre fichier XAML, ainsi que les définitions des modèles de données que vous utiliserez. Vous identifiez ces ressources avec une x:Key valeur, ce qui vous permet de les référencer dans votre code XAML.

Prerequisites

• Comment utiliser et créer un contrôle de collection, tel qu’un Contrôle ListView ou GridView.
• Comment personnaliser l’apparence de vos éléments à l’aide d’un DataTemplate.

Quand ne pas utiliser un DataTemplateSelector

En règle générale, vous ne devez pas donner à chaque élément d’un ListView ou gridView une disposition/un style complètement différent . Cela serait une mauvaise utilisation d’un DataTemplateSelector et affecterait négativement les performances.

Certains éléments de l’affichage visuel d’un élément de liste peuvent être contrôlés à l’aide d’un seul modèle de données, via la liaison de certaines propriétés. Par exemple, les éléments peuvent avoir chacune une icône différente en liant une propriété source d’icône dans le modèle de données et en donnant à chaque élément une valeur différente pour cette propriété source d’icône. Cela permettrait d’obtenir de meilleures performances que l’utilisation d’un DataTemplateSelector.

Quand utiliser un DataTemplateSelector

Vous devez créer un DataTemplateSelector lorsque vous souhaitez utiliser plusieurs modèles de données dans un contrôle de collection. A DataTemplateSelector vous donne la possibilité de faire ressortir certains éléments, tout en conservant des éléments dans une disposition similaire. Il existe de nombreux cas d’usage dans lesquels un DataTemplateSelector est utile, et quelques scénarios dans lesquels il est préférable de penser à nouveau le contrôle et la stratégie que vous utilisez.

Les contrôles de collection sont généralement liés à une collection d’éléments qui sont tous d’un type. Toutefois, même si les éléments peuvent être du même type, ils peuvent avoir des valeurs différentes pour certaines propriétés ou représenter des significations différentes. Certains éléments peuvent également être plus importants que d’autres, ou un élément peut être particulièrement important ou différent et a besoin de se distinguer visuellement. Dans ces situations, un DataTemplateSelector sera très utile.

Vous pouvez également établir une liaison à une collection qui contient différents types d’éléments : la collection liée peut avoir un mélange de chaînes, d’ints, d’objets de classe personnalisés, etc. Cela rend DataTemplateSelector particulièrement utile, car il peut affecter différents modèles de données en fonction du type d’objet d’un élément.

Voici quelques exemples de cas où vous pouvez utiliser un sélecteur de modèle de données :

• Représentant différents niveaux d’employés au sein d’un ListView : chaque type/niveau d’employé peut avoir besoin d’un arrière-plan de couleur différent pour être facilement identifiable.
• Représentation d’éléments de vente dans une galerie de produits qui utilise un GridView - un élément de vente peut avoir besoin d’un arrière-plan rouge ou d’une police de couleur différente pour le faire ressortir des articles à prix régulier.
• Présentation des photos gagnantes/meilleures dans une galerie photo avec FlipView.
• Besoin de représenter des nombres négatifs/positifs dans un ListView différemment, ou des chaînes courtes/chaînes longues.

Créer un DataTemplateSelector

Lorsque vous créez un sélecteur de modèle de données, vous définissez la logique de sélection de modèle dans votre code et vous définissez les modèles de données dans votre code XAML.

Composant Code-behind

Pour utiliser un sélecteur de modèle de données, vous créez d’abord une sous-classe de DataTemplateSelector (classe dérivée de celle-ci) dans votre code-behind. Dans votre classe, vous déclarez chaque modèle en tant que propriété de la classe. Ensuite, vous remplacez la méthode SelectTemplateCore pour inclure votre propre logique de sélection de modèle.

Voici un exemple de sous-classe simple DataTemplateSelector appelée 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 classe MyDataTemplateSelector dérive de la classe DataTemplateSelector et définit d’abord deux objets DataTemplate : Normal et Accent. Ces déclarations sont vides pour l’instant, mais seront « renseignées » avec le balisage dans le fichier XAML.

La méthode SelectTemplateCore reçoit un objet élément (c’est-à-dire chaque élément de la collection), et est remplacée par des règles stipulant quel DataTemplate retourner dans quelles circonstances. Dans ce cas, si l’élément est un nombre impair, il reçoit le Accent modèle de données, alors qu’il s’agit d’un nombre pair qu’il reçoit le Normal modèle de données.

Composant XAML

Ensuite, vous devez créer une instance de cette nouvelle MyDataTemplateSelector classe dans la section Ressources de votre fichier XAML. Toutes les ressources nécessitent un x:Key, que vous utilisez pour le lier à la ItemTemplateSelector propriété de votre contrôle de collection (dans une étape ultérieure). Vous créez également deux instances d’objets DataTemplate et définissez leur disposition dans la section ressources. Vous affectez ces modèles de données aux propriétés Accent et Normal que vous avez déclarées dans la classe MyDataTemplateSelector.

Voici un exemple de ressources XAML et de balisage nécessaires :

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

Comme vous pouvez le voir ci-dessus, les deux modèles Normal de données et Accent sont définis : ils affichent tous deux des éléments sous forme de boutons, mais le Accent modèle de données utilise un pinceau de couleur d’accentuation pour l’arrière-plan, tandis que le Normal modèle de données utilise un pinceau de couleur gris (SystemChromeLowColor). Ces deux modèles de données sont ensuite affectés aux objets DataTemplate Normal et Accent qui sont des attributs de la classe MyDataTemplateSelector, créés dans le code-behind C#.

La dernière étape consiste à lier votre DataTemplateSelector à la propriété ItemTemplateSelector de votre contrôle de collections (dans ce cas, un ListView). Cela remplace la nécessité d’affecter une valeur à la ItemTemplate propriété.

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

Une fois votre code compilé, chaque élément de la collection passe la méthode SelectTemplateCore substituée dans MyDataTemplateSelector et est affiché avec le DataTemplate approprié.

Considérations relatives aux performances de DataTemplateSelector

Lorsque vous utilisez un ListView ou GridView avec une collection de données volumineuse, les performances de défilement et de panoramique peuvent être un problème. Pour que les collections volumineuses fonctionnent bien, vous pouvez effectuer certaines étapes pour améliorer les performances de vos modèles de données. Ces informations sont décrites plus en détail dans l’optimisation de l’interface utilisateur ListView et GridView.

• Réduction des éléments par élément : conservez le nombre d’éléments d’interface utilisateur dans un modèle de données au minimum raisonnable.
• Recyclage de conteneurs avec collections hétérogènes
  • Utilisez l’événement ChoosingItemContainer : cet événement est un moyen hautes performances d’utiliser différents modèles de données pour différents éléments. Pour obtenir de meilleures performances, vous devez optimiser la mise en cache et sélectionner des modèles de données pour vos données spécifiques.
  • Utilisez un sélecteur de modèle d’élément : un sélecteur de modèle d’élément (DataTemplateSelector) doit être évité dans certaines instances en raison de son impact sur les performances.