TreeView – přehled

Článek
12/20/2024

Ovládací prvek TreeView poskytuje způsob zobrazení informací v hierarchické struktuře pomocí sbalitelných uzlů. Toto téma představuje ovládací prvky TreeView a TreeViewItem a poskytuje jednoduché příklady jejich použití.

Co je TreeView?

TreeView je ItemsControl, který vnořuje položky pomocí ovládacích prvků TreeViewItem. Následující příklad vytvoří objekt TreeView.

<TreeView Name="myTreeViewEvent" >
  <TreeViewItem Header="Employee1" IsSelected="True">
    <TreeViewItem Header="Jesper Aaberg"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="12345"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Monday"/>
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Thursday"/>
    </TreeViewItem>
  </TreeViewItem>
  <TreeViewItem Header="Employee2">
    <TreeViewItem Header="Dominik Paiha"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="98765"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Wednesday"/>
      <TreeViewItem Header="Friday"/>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>

Vytvoření stromového zobrazení

Ovládací prvek TreeView obsahuje hierarchii ovládacích prvků TreeViewItem. Ovládací prvek TreeViewItem je HeaderedItemsControl, který má Header a kolekci Items.

Pokud definujete TreeView pomocí jazyka XAML (Extensible Application Markup Language), můžete explicitně definovat Header obsah ovládacího prvku TreeViewItem a položky, které tvoří její kolekci. Předchozí obrázek ukazuje tuto metodu.

Můžete také zadat ItemsSource jako zdroj dat a poté zadat HeaderTemplate a ItemTemplate k definování obsahu TreeViewItem.

K definování rozložení ovládacího prvku TreeViewItem můžete také použít HierarchicalDataTemplate objekty. Další informace a příklad viz v tématu Použití SelectedValue, SelectedValuePath a SelectedItem.

Pokud položka není ovládacím prvkem TreeViewItem, je automaticky uzavřena ovládacím prvkem TreeViewItem při zobrazení ovládacího prvku TreeView.

Rozbalení a sbalení TreeViewItem

Pokud uživatel rozbalí TreeViewItem, vlastnost IsExpanded je nastavena na true. Můžete také rozbalit nebo sbalit TreeViewItem bez jakékoli přímé akce uživatele nastavením vlastnosti IsExpanded na true (rozbalení) nebo false (sbalit). Když se tato vlastnost změní, dojde k události Expanded nebo Collapsed.

Když je metoda BringIntoView volána na ovládacím prvku TreeViewItem, TreeViewItem a jeho nadřazené ovládací prvky TreeViewItem se rozbalí. Pokud TreeViewItem není viditelný nebo částečně viditelný, TreeView se posune, aby byl viditelný.

Výběr položky TreeView

Když uživatel klikne na ovládací prvek TreeViewItem a vybere ho, dojde k události Selected a jeho vlastnost IsSelected je nastavena na true. TreeViewItem se také stane SelectedItem ovládacího prvku TreeView. Naopak když se výběr změní z ovládacího prvku TreeViewItem, dojde k události Unselected a vlastnost IsSelected je nastavena na false.

Vlastnost SelectedItem ovládacího prvku TreeView je vlastnost jen pro čtení; proto jej nelze explicitně nastavit. Vlastnost SelectedItem je nastavena, pokud uživatel klikne na ovládací prvek TreeViewItem nebo když je vlastnost IsSelected nastavena na true v ovládacím prvku TreeViewItem.

Pomocí vlastnosti SelectedValuePath zadejte SelectedValue pro SelectedItem. Další informace naleznete v tématu Použít SelectedValue, SelectedValuePath a SelectedItem.

Obslužnou rutinu události můžete zaregistrovat u události SelectedItemChanged, abyste zjistili, kdy se vybraná TreeViewItem změní. RoutedPropertyChangedEventArgs<T>, který je předán obsluze události, určuje OldValue, což je předchozí výběr, a NewValue, což je aktuální výběr. Obě hodnoty mohou být null, pokud aplikace nebo uživatel neprovedla předchozí nebo aktuální výběr.

Styl TreeView

Výchozí styl ovládacího prvku TreeView ho umístí do objektu StackPanel, který obsahuje ovládací prvek ScrollViewer. Při nastavení vlastností Width a Height pro TreeViewse tyto hodnoty používají k nastavení velikosti objektu StackPanel, který zobrazuje TreeView. Pokud je obsah, který se má zobrazit, větší než oblast zobrazení, ScrollViewer se automaticky zobrazí, aby se uživatel mohl procházet obsahem TreeView.

Chcete-li přizpůsobit vzhled ovládacího prvku TreeViewItem, nastavte vlastnost Style na vlastní Style.

Následující příklad ukazuje, jak nastavit Foreground a FontSize hodnoty vlastnosti pro ovládací prvek TreeViewItem pomocí Style.

<Style TargetType="{x:Type TreeViewItem}">
  <Setter Property="Foreground" Value="Blue"/>
  <Setter Property="FontSize" Value="12"/>
</Style>

Přidání obrázků a dalšího obsahu do položek TreeView

Do Header obsahu TreeViewItemmůžete zahrnout více objektů . Pokud chcete do Header obsahu zahrnout více objektů, uzavřete objekty do ovládacího prvku rozložení, například Panel nebo StackPanel.

Následující příklad ukazuje, jak definovat Header TreeViewItem jako CheckBox a TextBlock, které jsou obě uzavřeny v ovládacím prvku DockPanel.

<TreeViewItem>
  <TreeViewItem.Header>
    <DockPanel>
      <CheckBox/>
      <TextBlock>
        TreeViewItem Text
      </TextBlock>
    </DockPanel>
  </TreeViewItem.Header>
</TreeViewItem>

Následující příklad ukazuje, jak definovat DataTemplate, který obsahuje Image a TextBlock, které jsou uzavřeny v ovládacím prvku DockPanel. K nastavení HeaderTemplate nebo ItemTemplate pro TreeViewItemmůžete použít DataTemplate .

<DataTemplate x:Key="NewspaperTVItem">
  <DockPanel>
    <Image Source="images\icon.jpg"/>
    <TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
  </DockPanel>
</DataTemplate>

Sdílet prostřednictvím