Partager via

Présentation des modèles de Xamarin.Forms données

  • Article

Xamarin.Forms Les modèles de données permettent de définir la présentation des données sur les contrôles pris en charge. Cet article présente les modèles de données et explique pourquoi ils sont nécessaires.

Prenons l’exemple d’un ListView qui affiche une collection d’objets Person. L’exemple de code suivant montre la définition de la classe Person :

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

La classe Person définit les propriétés Name, Age et Location, qui peuvent être définies durant la création d’un objet Person. ListView permet d’afficher la collection d’objets Person, comme indiqué dans l’exemple de code XAML suivant :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataTemplates"
             ...>
    <StackLayout Margin="20">
        ...
        <ListView Margin="0,20,0,0">
            <ListView.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>
            </ListView.ItemsSource>
        </ListView>
    </StackLayout>
</ContentPage>

Les éléments sont ajoutés au ListView en XAML via l’initialisation de la propriété ItemsSource à partir d’un tableau d’instances de Person.

Remarque

Notez que l’élément x:Array nécessite un attribut Type qui indique le type des éléments du tableau.

La page équivalente en C# est illustrée dans l’exemple de code suivant, qui initialise la propriété ItemsSource à un List d’instances de Person :

public WithoutDataTemplatePageCS()
{
    ...
    var people = new List<Person>
    {
        new Person { Name = "Steve", Age = 21, Location = "USA" },
        new Person { Name = "John", Age = 37, Location = "USA" },
        new Person { Name = "Tom", Age = 42, Location = "UK" },
        new Person { Name = "Lucas", Age = 29, Location = "Germany" },
        new Person { Name = "Tariq", Age = 39, Location = "UK" },
        new Person { Name = "Jane", Age = 30, Location = "USA" }
    };

    Content = new StackLayout
    {
        Margin = new Thickness(20),
        Children = {
            ...
            new ListView { ItemsSource = people, Margin = new Thickness(0, 20, 0, 0) }
        }
    };
}

ListView appelle ToString au moment d’afficher les objets de la collection. Dans la mesure où il n’existe pas de substitution de Person.ToString, ToString retourne le nom du type de chaque objet, comme indiqué dans les captures d’écran suivantes :

ListView sans modèle de données

L’objet Person peut remplacer la méthode ToString pour afficher les données significatives, comme indiqué dans l’exemple de code suivant :

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

Ainsi, ListView affiche la valeur de propriété Person.Name pour chaque objet de la collection, comme indiqué dans les captures d’écran suivantes :

ListView avec un modèle de données

La substitution de Person.ToString 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 souplesse, vous pouvez créer un DataTemplate qui définit l’apparence des données.

Création d’un DataTemplate

DataTemplate permet de spécifier l’apparence des données et utilise généralement la liaison de données pour afficher les données. Le scénario d’usage courant consiste à afficher les données provenant d’une collection d’objets dans un ListView. Par exemple, quand ListView est lié à une collection d’objets Person, la propriété ListView.ItemTemplate a la valeur d’un DataTemplate qui définit l’apparence de chaque objet Person dans ListView. DataTemplate contient des éléments qui se lient aux valeurs de propriété de chaque objet Person. Pour plus d’informations sur la liaison de données, consultez Notions de base de la liaison de données.

Un DataTemplate placé en tant qu’enfant direct des propriétés listées ci-dessus est appelé un modèle inline. Vous pouvez également définir un DataTemplate en tant que ressource au niveau du contrôle, au niveau de la page ou au niveau de l’application. Le fait de choisir où définir DataTemplate impacte l’emplacement où il peut être utilisé :

  • Un DataTemplate défini au niveau du contrôle peut uniquement être appliqué au contrôle.
  • Un DataTemplate défini au niveau de la page peut être appliqué à plusieurs contrôles valides de la page.
  • Un DataTemplate défini au niveau de l’application peut être appliqué aux contrôles valides dans toute l’application.

Les modèles de données situés plus bas dans la hiérarchie de vues sont prioritaires par rapport à ceux définis plus haut quand ils partagent des attributs x:Key. Par exemple, un modèle de données au niveau de l’application est 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 est remplacé par un modèle de données au niveau du contrôle ou par un modèle de données inline.