Udostępnij za pośrednictwem

TreeView — Przegląd

  • Artykuł

Kontrolka TreeView umożliwia wyświetlanie informacji w strukturze hierarchicznej przy użyciu zwijanych węzłów. W tym temacie przedstawiono kontrolki TreeView i TreeViewItem oraz przedstawiono proste przykłady ich użycia.

Co to jest widok drzewa?

TreeView to element ItemsControl , który zagnieżdża elementy za pomocą TreeViewItem kontrolek. Poniższy przykład tworzy obiekt 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>

Tworzenie widoku drzewa

Kontrolka TreeView zawiera hierarchię TreeViewItem kontrolek. Kontrolka TreeViewItem to HeaderedItemsControl element z kolekcją HeaderItems i .

Jeśli definiujesz element TreeView przy użyciu języka XAML (Extensible Application Markup Language), możesz jawnie zdefiniować Header zawartość kontrolki TreeViewItem i elementy tworzące jego kolekcję. Na poprzedniej ilustracji przedstawiono tę metodę.

Można również określić jako ItemsSource źródło danych, a następnie określić element HeaderTemplate i ItemTemplate , aby zdefiniować TreeViewItem zawartość.

Aby zdefiniować układ kontrolki TreeViewItem , można również użyć HierarchicalDataTemplate obiektów. Aby uzyskać więcej informacji i przykład, zobacz Use SelectedValue, SelectedValuePath, and SelectedItem (Używanie elementu SelectedValue, SelectedValuePath i SelectedItem).

Jeśli element nie jest kontrolką TreeViewItem , jest automatycznie ujęta przez kontrolkę TreeViewItem po wyświetleniu kontrolki TreeView .

Rozszerzanie i zwijanie elementu TreeViewItem

Jeśli użytkownik rozszerzy właściwość TreeViewItem, właściwość zostanie ustawiona IsExpanded na truewartość . Możesz również rozwinąć lub zwinąć TreeViewItem bez żadnej bezpośredniej akcji użytkownika, ustawiając IsExpanded właściwość na true (rozwiń) lub false (zwiń). Gdy ta właściwość ulegnie zmianie, Expanded wystąpi zdarzenie lub Collapsed .

Gdy metoda jest wywoływana BringIntoView w kontrolce TreeViewItem , kontrolka TreeViewItem i jej kontrolki nadrzędne TreeViewItem są rozszerzane. Jeśli element TreeViewItem nie jest widoczny lub częściowo widoczny, TreeView przewiń, aby go zobaczyć.

Wybór elementu TreeViewItem

Gdy użytkownik kliknie kontrolkę TreeViewItem , aby ją wybrać, Selected wystąpi zdarzenie, a jego IsSelected właściwość ma wartość true. Obiekt TreeViewItem staje się SelectedItem również kontrolką TreeView . Z drugiej strony, gdy zaznaczenie zmieni się z kontrolki TreeViewItem , wystąpi jego Unselected zdarzenie, a jego IsSelected właściwość jest ustawiona na falsewartość .

Właściwość SelectedItem kontrolki TreeView jest właściwością tylko do odczytu, dlatego nie można jawnie jej ustawić. Właściwość SelectedItem jest ustawiana, jeśli użytkownik kliknie kontrolkę TreeViewItem lub gdy IsSelected właściwość jest ustawiona true na kontrolkę TreeViewItem .

SelectedValuePath Użyj właściwości , aby określić element SelectedValueSelectedItem. Aby uzyskać więcej informacji, zobacz Use SelectedValue, SelectedValuePath i SelectedItem.

Program obsługi zdarzeń można zarejestrować w SelectedItemChanged zdarzeniu, aby określić, kiedy wybrane TreeViewItem zmiany. Element RoutedPropertyChangedEventArgs<T> podany w procedurze obsługi zdarzeń określa OldValueelement , który jest poprzednim wyborem, a NewValueelement , który jest bieżącym wyborem. Wartość może być null równa, jeśli aplikacja lub użytkownik nie dokonał poprzedniego lub bieżącego zaznaczenia.

Styl widoku drzewa

Domyślny styl kontrolki TreeView umieszcza go wewnątrz obiektu zawierającego StackPanel kontrolkę ScrollViewer . Po ustawieniu Width właściwości i Height dla TreeViewelementu wartości te są używane do rozmiaru StackPanel obiektu, który wyświetla TreeViewobiekt . Jeśli zawartość do wyświetlenia jest większa niż obszar wyświetlania, ScrollViewer zostanie wyświetlony automatycznie, aby użytkownik mógł przewijać TreeView zawartość.

Aby dostosować wygląd kontrolki TreeViewItem , ustaw Style właściwość na niestandardową Style.

W poniższym przykładzie pokazano, jak ustawić Foreground wartości właściwości i FontSize dla kontrolki TreeViewItem przy użyciu elementu Style.

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

Dodawanie obrazów i inną zawartość do elementów TreeView

W zawartości obiektu TreeViewItemmożna uwzględnić więcej niż jeden obiektHeader. Aby uwzględnić wiele obiektów w Header zawartości, należy ująć obiekty wewnątrz kontrolki układu, takiej jak lub PanelStackPanel.

W poniższym przykładzie pokazano, jak zdefiniować HeaderTreeViewItem element jako element CheckBox i TextBlock , które są ujęte w kontrolce DockPanel .

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

W poniższym przykładzie pokazano, jak zdefiniować obiekt DataTemplate zawierający element Image i TextBlock , który znajduje się w kontrolce DockPanel . Możesz użyć elementu DataTemplate , aby ustawić HeaderTemplate element lub ItemTemplate dla elementu TreeViewItem.

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

Zobacz też