[WPF] Les DataTemplate

Le rôle des DataTemplate en WPF est de définir la structure visuelle d’un ensemble de donnée.

Typiquement, à partir d’une information bindée, le DataTemplate servira à définir le mode de représentation des données de manière générale, ou spécifique au type de donnée.

Méthode 1 : Définition dans ItemTemplate

Les Contrôles WPF commun disposent pour certain d’un ItemTemplate, permettant de définir un template de données.

<ListView ItemsSource="{Binding Elements}" Width="225" HorizontalAlignment="Left" Margin="279,10,0,0" VerticalAlignment="Top">
  <ListView.ItemTemplate>
   <DataTemplate>
    <Rectangle Width="50" Height="30" Fill="Green" Margin="5"></Rectangle>
   </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Ici, la liste de donnée bindé (Elements) sera structurée comme définie dans ListView.ItemTemplate via la balise DataTemplate.
En substance, un Rectangle vert s’affichera pour chaque éléments de la liste.

Méthode 2 : Définition dans Resources

Les contrôles WPF communs exposant des éléments bindé peuvent être associé à un DataTemplate définit dans les resources.

<UserControl.Resources>
  <DataTemplate x:Key="LesElements">
   <Rectangle Width="100" Height="50" Fill="Red"></Rectangle>
  </DataTemplate>
</UserControl.Resources>

Plus loin, la liste est liée au DataTemplate :

<ListView ItemsSource="{Binding Elements}" Width="225" HorizontalAlignment="Left" Margin="534,10,0,0" VerticalAlignment="Top"
ItemTemplate="{StaticResource LesElements}" />

Methode 3 : Définition Typé dans les resources

Les contrôles WPF bindant des données peuvent présenter des données selon un DataTemplate présentant les informations selon le type de données. Il n’est ici pas nécessaire de lié le controle au DataTemplate car les éléments présentés utiliseront la mise en forme proposé par le DataTemplate typé

<UserControl.Resources>
        <DataTemplate DataType="{x:Type Model:Square}">
            <Rectangle Width="30" Height="30" Fill="LightGreen" Margin="5" />
        </DataTemplate>
</UserControl.Resources>

La liste présentant des éléments <Square> présentera donc que des carrés rouge.

<ListView ItemsSource="{Binding Elements}" />

Les Datas Templates peuvent aussi être définis au sein d’un fichier de Ressources et associés à des UserControls.
Cela permet d’associer une Classe contenant de nombreuses propriétés à un UserControl (composant la Vue), de manière, par exemple, à associer une VueModel à une Vue dans un pattern MVVM.

Sources :

https://www.softfluent.fr/blog/expertise/Les-DataTemplate-WPF-Partie1

https://docs.microsoft.com/fr-fr/dotnet/api/system.windows.datatemplate?view=netframework-4.7.2

Un commentaire

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *