Partager via

Guide pratique pour créer des TreeViews simples ou complexes

Cet exemple montre comment créer des contrôles simples ou complexes TreeView .

Une TreeView se compose d'une hiérarchie de TreeViewItem contrôles, qui peut contenir des chaînes de texte simples ainsi que du contenu plus complexe, tel que des contrôles Button ou un StackPanel avec contenu incorporé. Vous pouvez définir explicitement le TreeView contenu ou une source de données peut fournir le contenu. Cette rubrique fournit des exemples de ces concepts.

Exemple :

La propriété Header du TreeViewItem contient le contenu que TreeView affiche pour cet élément. Un TreeViewItem peut également avoir des contrôles TreeViewItem comme éléments enfants et vous pouvez définir ces éléments enfants en utilisant la propriété Items.

L'exemple suivant montre comment définir explicitement le contenu TreeViewItem en réglant la propriété Header sur une chaîne de texte.

<TreeView>
  <TreeViewItem Header="Employee1">
    <TreeViewItem Header="Jesper"/>
    <TreeViewItem Header="Aaberg"/>
    <TreeViewItem Header="12345"/>
  </TreeViewItem>
 <TreeViewItem Header="Employee2">
    <TreeViewItem Header="Dominik"/>
    <TreeViewItem Header="Paiha"/>
    <TreeViewItem Header="98765"/>
  </TreeViewItem>
</TreeView>

L’exemple suivant montre comment définir des éléments enfants d’un TreeViewItem en définissant Items qui sont Button des contrôles.

<TreeView>
  <TreeViewItem Header ="Employee1">
    <TreeViewItem.Items>
      <Button>Jesper</Button>
      <Button>Aaberg</Button>
      <Button>12345</Button>
    </TreeViewItem.Items>
  </TreeViewItem>
  <TreeViewItem Header="Employee2">
    <TreeViewItem.Items>
      <Button>Dominik</Button>
      <Button>Paiha</Button>
      <Button>98765</Button>
    </TreeViewItem.Items>
  </TreeViewItem>
</TreeView>

L’exemple suivant montre comment créer un TreeView où un XmlDataProvider fournit un TreeViewItem contenu et un HierarchicalDataTemplate définit l’apparence de ce contenu.

<XmlDataProvider x:Key="myEmployeeData" XPath="/EmployeeData">
  <x:XData>
    <EmployeeData xmlns="">
      <EmployeeInfo>
        <EmployeeInfoData>Employee1</EmployeeInfoData>
        <Item Type="FirstName">Jesper</Item>
        <Item Type="LastName">Aaberg</Item>
        <Item Type="EmployeeNumber">12345</Item>
      </EmployeeInfo>
      <EmployeeInfo>
        <EmployeeInfoData>Employee2</EmployeeInfoData>
        <Item Type="FirstName">Dominik</Item>
        <Item Type="LastName">Paiha</Item>
        <Item Type="EmployeeNumber">98765</Item>
      </EmployeeInfo>
    </EmployeeData>
  </x:XData>
</XmlDataProvider>

<HierarchicalDataTemplate DataType="EmployeeInfo" 
  ItemsSource ="{Binding XPath=Item}">
  <TextBlock Text="{Binding XPath=EmployeeInfoData}" />
</HierarchicalDataTemplate>

<TreeView ItemsSource="{Binding Source={StaticResource myEmployeeData}, 
  XPath=EmployeeInfo}"/>

L’exemple suivant montre comment créer un TreeView dans lequel le contenu TreeViewItem contient des contrôles DockPanel incorporant du contenu.

<TreeView>
  <TreeViewItem Header="Animals">
    <TreeViewItem.Items>
    <DockPanel>
      <Image Source="data\fish.png"/>
      <TextBlock Margin="5" Foreground="Brown"
                 FontSize="12">Fish</TextBlock>
    </DockPanel>
    <DockPanel>
      <Image Source="data\dog.png"/>
      <TextBlock Margin="5" Foreground="Brown"
                 FontSize="12">Dog</TextBlock>
    </DockPanel>
    <DockPanel>
      <Image Source="data\cat.png"/>
      <TextBlock Margin="5" Foreground="Brown"
                 FontSize="12">Cat</TextBlock>
    </DockPanel>
  </TreeViewItem.Items>
  </TreeViewItem>      
</TreeView>

Voir aussi

  • Last updated on