TreeView – přehled

Článek
10/18/2023

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

Co je TreeView?

TreeView je vnoření ItemsControl položek pomocí TreeViewItem ovládacích prvků. Následující příklad vytvoří .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í TreeView

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

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

Můžete také zadat jako ItemsSource zdroj dat a pak zadat HeaderTemplate a ItemTemplate definovat TreeViewItem obsah.

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

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

Rozbalení a sbalení TreeViewItem

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

Při zavolání BringIntoView metody na ovládacím TreeViewItem prvku se TreeViewItem rozbalí nadřazené TreeViewItem ovládací prvky. TreeViewItem Pokud není viditelný nebo částečně viditelný, TreeView posune se, aby byl viditelný.

TreeViewItem Selection

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

Vlastnost SelectedItem ovládacího prvku je vlastnost určená jen pro TreeView čtení. Proto ji nemůžete explicitně nastavit. Vlastnost SelectedItem je nastavena, pokud uživatel klikne na TreeViewItem ovládací prvek nebo když IsSelected je vlastnost nastavena true na ovládací prvek TreeViewItem .

SelectedValuePath Vlastnost slouží k určení SelectedValue objektu SelectedItem. Další informace naleznete v tématu Použití SelectedValue, SelectedValuePath a SelectedItem.

Obslužnou rutinu SelectedItemChanged události můžete u události zaregistrovat, abyste zjistili, kdy se má vybraná TreeViewItem změna změnit. Zadaný RoutedPropertyChangedEventArgs<T> obslužné rutině události určuje OldValue, což je předchozí výběr, a NewValue, což je aktuální výběr. Hodnota může být null buď v případě, že aplikace nebo uživatel nevytáčil předchozí nebo aktuální výběr.

Styl TreeView

Výchozí styl ovládacího prvku ho TreeView umístí do objektu StackPanel ScrollViewer , který obsahuje ovládací prvek. Když nastavíte Width a Height vlastnosti objektu TreeView, tyto hodnoty se použijí k nastavení velikosti StackPanel objektu TreeView, který zobrazuje objekt . Pokud je obsah, který se má zobrazit, větší než oblast zobrazení, ScrollViewer automaticky se zobrazí, aby uživatel mohl procházet TreeView obsah.

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

Následující příklad ukazuje, jak nastavit Foreground hodnoty a FontSize vlastnosti TreeViewItem ovládacího prvku 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 obsahu objektu TreeViewItemmůžete zahrnout více než jeden objekt Header . Pokud chcete do obsahu zahrnout více objektů Header , uzavřete objekty do ovládacího prvku rozložení, jako je například nebo Panel StackPanel.

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

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

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

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

Sdílet prostřednictvím