Partager via

Guide pratique pour créer des TreeViews simples ou complexes

  • Article

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

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

Exemple

La propriété Header de l'TreeViewItem contient le contenu affiché par l'TreeView pour cet élément. Un TreeViewItem peut également avoir des contrôles TreeViewItem en tant qu’éléments enfants et vous pouvez définir ces éléments enfants à l’aide de la propriété Items.

L’exemple suivant montre comment définir explicitement le contenu de TreeViewItem en configurant 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 des Items qui sont des contrôles Button.

<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 TreeViewItem contenu et un HierarchicalDataTemplate définit l’apparence du 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 où le contenu TreeViewItem contient des contrôles DockPanel qui ont du contenu incorporé.

<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