Bien que fonctionnel, l'affichage par défaut d'un nœud dans TreeView est constitué d'une seule ligne avec une icône et du texte. Dans ce blog, nous vous montrons comment obtenir l'affichage que vous voulez vraiment en créant votre propre modèle personnalisé.

Il n'y a rien d'anormal dans l'affichage par défaut d'un nœud dans un TreeView . Mais ce n’est qu’une simple ligne avec une icône et du texte. Si vous voulez faire plus, vous pouvez! Tout ce que vous avez à faire est d’emballer du balisage dans un élément pour obtenir l’affichage souhaité.

Dans un post précédent j’ai montré comment charger un TreeView avec objets extraits de Entity Framework (et avec un peu de LINQ). Ce que je n’ai pas expliqué, c’est comment gérer ce qui est affiché dans chacun de ses nœuds.

Par défaut, la TreeView affiche tout ce que vous avez dans la propriété Text de l’objet que vos nœuds TreeView représentent. Et, également par défaut, le nœud affichera l'icône ou l'image que vous spécifiez dans l'objet du nœud avec ce texte.

Mais si vous voulez quelque chose de plus (ou quelque chose de différent), vous pouvez l'avoir aussi: vous pouvez créer votre propre modèle personnalisé avec les données du nœud que vous souhaitez afficher (y compris différents modèles pour différents niveaux dans votre TreeView ). Une seule mise en garde: l'ajout d'un modèle supprime le comportement par défaut d'affichage d'un nœud. Si vous souhaitez afficher le texte ou l'icône du nœud, vous devez l'ajouter à votre modèle.

Un modèle de base

La création d'un modèle qui s'applique à chaque nœud est simple: dans l'élément ajoutez un élément et, en son sein, un élément (vous en avez probablement déjà déjà en place pour gérer la liaison des propriétés de votre objet au nœud de TreeView ). La création d'un modèle consiste simplement à ajouter un élément dans l'élément :

Dans l'élément vous pouvez indiquer la combinaison de balises et de texte à afficher pour le nœud. Vous pouvez accéder à l'objet associé au nœud à l'aide du mot clé context context (vous aurez besoin de transtyper le contexte en fonction du type de l'objet défini par TreeView .

Dans l’étude de cas que j’avais utilisée dans mon précédent post, j’ai affiché un objet OrgUnit dans chaque noeud de mon TreeView . Je pourrais donc créer un modèle d’élément qui saisit la propriété Name et l’affiche avec des balises:

   Département: 
 @ ((contexte sous la forme OrgUnit) .Name) 

Par le Ainsi, si vous n'êtes pas satisfait d'utiliser le contexte dans votre code, vous pouvez modifier ce nom à l'aide de l'attribut Contexte de l'élément . Pour cet exemple, je préférerais peut-être utiliser le nom de l'objet que le nœud affiche. Si tel est le cas, je pourrais reformuler mon exemple comme suit:

   Département: 
 @ (OrgUnit en tant qu'OrgUnit) .Name 

Au-delà de l'essentiel

Vous n'êtes pas limité à une seule ligne de texte dans votre modèle. : vous pouvez mettre autant de texte et de balisage que vous le souhaitez. Toutefois, si vous utilisez plusieurs lignes, il est judicieux de les insérer dans un élément

   

    Département: 
 @ ((contexte comme OrgUnit) .Name) 


     Manager: 
 @ ((contexte comme OrgUnit) .Manager) 
  

   @ {
    OrgUnit ou = context as OrgUnit;
    

      Département: 
 @ ou.Name 


     Directeur: 
 @ ou.Manager 
    
  }

  
    
       Département: 
 @ ((contexte comme OrgUnit) .Name) 
    
  
  
    
       Société: 
 @ ((contexte comme OrgUnit ) .Name) 
    
  
  
    
       Division: 
 @ ((contexte: OrgUnit) .Name)