Modèles de données

Parcourir l'exemple

Les modèles de données d’interface utilisateur d’application multiplateforme .NET (.NET MAUI) permettent de définir la présentation des données sur les contrôles pris en charge.

CollectionView qui affiche une collection d’objets Person. L’exemple suivant montre la définition de la Person classe :

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Location { get; set; }
}

La Person classe définit Name, Ageet Location les propriétés, qui peuvent être définies lors de la création d’un Person objet. Un contrôle qui affiche des collections, par exemple CollectionView, peut être utilisé pour afficher des Person objets :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataTemplates"
             x:Class="DataTemplates.WithoutDataTemplatePage">
    <StackLayout>
        <CollectionView>
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type local:Person}">
                    <local:Person Name="Steve" Age="21" Location="USA" />
                    <local:Person Name="John" Age="37" Location="USA" />
                    <local:Person Name="Tom" Age="42" Location="UK" />
                    <local:Person Name="Lucas" Age="29" Location="Germany" />
                    <local:Person Name="Tariq" Age="39" Location="UK" />
                    <local:Person Name="Jane" Age="30" Location="USA" />
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </StackLayout>
</ContentPage>

Dans cet exemple, les éléments sont ajoutés à la CollectionView propriété en initialisant sa ItemsSource propriété à partir d’un tableau d’objets Person . CollectionView appelle ToString lors de l’affichage des objets dans la collection. Toutefois, étant donné qu’il n’existe aucun Person.ToString remplacement, ToString retourne le nom de type de chaque objet :

L’objet Person peut remplacer la ToString méthode pour afficher des données significatives :

public class Person
{
    ...
    public override string ToString ()
    {
        return Name;
    }
}

Cela entraîne le CollectionView à afficher la valeur de la propriété Person.Name pour chaque objet de la collection :

La Person.ToString surcharge peut retourner une chaîne mise en forme composée des propriétés Name, Age, et Location. Toutefois, cette approche offre uniquement un contrôle limité sur l’apparence de chaque élément de données. Pour plus de flexibilité, vous pouvez créer un DataTemplate élément qui définit l’apparence des données.

Créer un DataTemplate

Un DataTemplate est utilisé pour spécifier l'apparence des données et utilise généralement la liaison de données pour afficher les données. Un scénario d’utilisation courant pour les modèles de données consiste à afficher des données à partir d’une collection d’objets dans un contrôle tel qu’un CollectionView ou CarouselView. Par exemple, lorsqu’un CollectionView objet est lié à une collection d’objets Person , la ItemTemplate propriété peut être définie sur une DataTemplate valeur qui définit l’apparence de chaque Person objet dans le CollectionView. Le DataTemplate fichier contient des objets qui sont liés aux valeurs de propriété de chaque Person objet. Pour plus d’informations sur la liaison de données, consultez Liaison de données.

Un DataTemplate défini en ligne dans un contrôle est connu sous le nom de modèle inline. Vous pouvez également définir des modèles de données comme une ressource au niveau du contrôle, au niveau de la page ou au niveau de l’application. Choisir où définir un DataTemplate impacte l'endroit où il peut être utilisé :

• Un DataTemplate paramètre défini au niveau du contrôle ne peut être appliqué qu’au contrôle.
• Une DataTemplate définie au niveau de la page peut être appliquée à plusieurs éléments de contrôle de la page.
• Un élément DataTemplate défini à l'application peut être appliqué aux contrôles valides à travers l'application.

Note

Les modèles de données inférieurs dans la hiérarchie d’affichage prennent le dessus sur ceux définis plus haut lorsqu'ils partagent les mêmes attributs x:Key. Par exemple, un modèle de données au niveau de l’application sera remplacé par un modèle de données au niveau de la page et un modèle de données au niveau de la page sera remplacé par un modèle de données au niveau du contrôle ou un modèle de données inline.

Un DataTemplate peut être créé inline, avec un type ou en tant que ressource, quel que soit l’emplacement défini.

Créer un DataTemplate en ligne

Un modèle de données intégré, qui est défini à l'intérieur d'un contrôle, doit être utilisé s’il n’est pas nécessaire de réutiliser le modèle de données ailleurs. Les objets spécifiés dans le DataTemplate définissent l’apparence de chaque élément de données. Un contrôle tel que CollectionView peut ensuite définir sa propriété ItemTemplate sur l'élément en ligne DataTemplate:

<CollectionView>
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type local:Person}">
            <local:Person Name="Steve" Age="21" Location="USA" />
            <local:Person Name="John" Age="37" Location="USA" />
            <local:Person Name="Tom" Age="42" Location="UK" />
            <local:Person Name="Lucas" Age="29" Location="Germany" />
            <local:Person Name="Tariq" Age="39" Location="UK" />
            <local:Person Name="Jane" Age="30" Location="USA" />
        </x:Array>
    </CollectionView.ItemsSource>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="local:Person">
            <Grid>
                ...
                <Label Text="{Binding Name}" FontAttributes="Bold" />
                <Label Grid.Column="1" Text="{Binding Age}" />
                <Label Grid.Column="2" Text="{Binding Location}" HorizontalTextAlignment="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Dans un CollectionView, l’enfant d’un inline DataTemplate doit dériver de BindableObject. Dans cet exemple, un Grid, qui dérive de Layout, est utilisé. Le Grid contient trois Label objets qui lient leurs Text propriétés aux propriétés de chaque Person objet de la collection. La capture d’écran suivante montre l’apparence résultante :

Créer un DataTemplate avec un type

Un DataTemplate peut être créé avec un type d’affichage personnalisé. L’avantage de cette approche est que l’apparence définie par la vue peut être réutilisée par plusieurs modèles de données dans une application. Un contrôle tel que CollectionView peut ensuite définir sa ItemTemplate propriété sur :DataTemplate

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataTemplates"
             x:Class="DataTemplates.WithDataTemplatePageFromType">
    <StackLayout>
        <CollectionView>
           <CollectionView.ItemsSource>
                <x:Array Type="{x:Type local:Person}">
                    <local:Person Name="Steve" Age="21" Location="USA" />
                    ...
                </x:Array>
            </CollectionView.ItemsSource>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <local:PersonView />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Dans cet exemple, la ItemTemplate propriété est définie sur une DataTemplate valeur créée à partir d’un type personnalisé qui définit l’apparence de la vue. Le type personnalisé doit dériver de ContentView:

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataTemplates"
             x:Class="DataTemplates.PersonView"
             x:DataType="local:Person">
     <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*" />
            <ColumnDefinition Width="0.2*" />
            <ColumnDefinition Width="0.3*" />
        </Grid.ColumnDefinitions>
        <Label Text="{Binding Name}" FontAttributes="Bold" />
        <Label Grid.Column="1" Text="{Binding Age}" />
        <Label Grid.Column="2" Text="{Binding Location}" HorizontalTextAlignment="End" />
    </Grid>
</ContentView>

Dans cet exemple, la disposition du ContentView est gérée par un élément Grid. Le Grid contient trois Label objets qui lient leurs propriétés Text aux propriétés de chaque objet Person de la collection.

Pour plus d’informations sur la création de vues personnalisées, consultez ContentView.

Créer un DataTemplate en tant que ressource

Les modèles de données peuvent être créés en tant qu’objets réutilisables dans un ResourceDictionary. Cela est obtenu en donnant à chacun DataTemplate une valeur unique x:Key , qui lui fournit une clé descriptive dans le ResourceDictionary. Un contrôle tel que CollectionView peut ensuite définir sa ItemTemplate propriété sur :DataTemplate

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataTemplates"
             x:Class="DataTemplates.WithDataTemplateResource">
    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="personTemplate">
                <Grid>
                    ...
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout>
        <CollectionView ItemTemplate="{StaticResource personTemplate}">
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type local:Person}">
                    <local:Person Name="Steve" Age="21" Location="USA" />
                    ...
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </StackLayout>
</ContentPage>

Dans cet exemple, la propriété ItemTemplate est assignée à l'aide de l'extension de balisage StaticResource à DataTemplate. Bien que l’élément DataTemplate soit défini dans la page, il peut également être défini au niveau du contrôle ou de l’application ResourceDictionary.

Créer un DataTemplateSelector

Un DataTemplateSelector peut être utilisé pour choisir un DataTemplate au moment de l’exécution en fonction de la valeur d’une propriété liée aux données. Cela permet à plusieurs modèles de données d’être appliqués au même type d’objet, de choisir leur apparence au moment de l’exécution. Un sélecteur de modèle de données permet des scénarios tels qu’une liaison CollectionView ou CarouselView à une collection d’objets, où l’apparence de chaque objet peut être choisie au moment de l’exécution grâce au sélecteur de modèle de données qui retourne un modèle spécifique DataTemplate.

Un sélecteur de modèle de données est implémenté en créant une classe qui hérite de DataTemplateSelector. La OnSelectTemplate méthode doit ensuite être remplacée pour retourner un élément spécifique DataTemplate:

public class PersonDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate ValidTemplate { get; set; }
    public DataTemplate InvalidTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((Person)item).DateOfBirth.Year >= 1980 ? ValidTemplate : InvalidTemplate;
    }
}

Dans cet exemple, la OnSelectTemplate méthode retourne un modèle de données spécifique en fonction de la valeur de la DateOfBirth propriété. Le modèle de données retourné est défini par la propriété ValidTemplate ou InvalidTemplate, qui est définie lors de l'utilisation du sélecteur de modèle de données.

Limites

DataTemplateSelector les objets présentent les limitations suivantes :

• La DataTemplateSelector sous-classe doit toujours retourner le même modèle pour les mêmes données si elle est interrogée plusieurs fois.
• La DataTemplateSelector sous-classe ne doit pas retourner une autre DataTemplateSelector sous-classe.
• La sous-classe DataTemplateSelector ne doit pas retourner de nouvelles instances à chaque appel de DataTemplate. Au lieu de cela, la même instance doit être retournée. L’échec de cette opération crée une fuite de mémoire et désactive la virtualisation du contrôle.

Utiliser un DataTemplateSelector

Un sélecteur de modèle de données peut être consommé en le créant en tant que ressource et en affectant son instance aux propriétés de contrôle .NET MAUI de type DataTemplate, telles que ItemTemplate.

L’exemple suivant montre la déclaration PersonDataTemplateSelector en tant que ressource au niveau de la page :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:local="clr-namespace:Selector"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Selector.MainPage">
    <ContentPage.Resources>
        <DataTemplate x:Key="validPersonTemplate">
            <Grid>
                ...
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="invalidPersonTemplate">
            <Grid>
                ...
            </Grid>
        </DataTemplate>
        <local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"
                                          ValidTemplate="{StaticResource validPersonTemplate}"
                                          InvalidTemplate="{StaticResource invalidPersonTemplate}" />
    </ContentPage.Resources>
    ...
</ContentPage>

Dans cet exemple, le niveau ResourceDictionary page définit deux DataTemplate objets et un PersonDataTemplateSelector objet. L’objet PersonDataTemplateSelector définit ses propriétés ValidTemplate et InvalidTemplate sur les objets DataTemplate à l’aide de l’extension de balisage StaticResource. Bien que les ressources soient définies dans les ResourceDictionarypages, elles peuvent également être définies au niveau du contrôle ou de l’application.

L’objet PersonDataTemplateSelector peut être consommé en l’affectant à la ItemTemplate propriété :

<CollectionView x:Name="collectionView"
                ItemTemplate="{StaticResource personDataTemplateSelector}" />

Au moment de l'exécution, le CollectionView appelle la méthode PersonDataTemplateSelector.OnSelectTemplate pour chacun des éléments de la collection sous-jacente, en transmettant l'objet de données en tant que paramètre item. Le retour DataTemplate est ensuite appliqué à cet objet.

La capture d’écran suivante montre le résultat de l’application CollectionViewPersonDataTemplateSelector à chaque objet de la collection sous-jacente :

Dans cet exemple, tout Person objet dont la DateOfBirth valeur de propriété est supérieure ou égale à 1980 s’affiche en vert, avec les objets restants affichés en rouge.