TreeView — omówienie

Artykuł
12/18/2024

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 TreeView?

TreeView to ItemsControl, który zagnieżdża elementy używając kontrolek TreeViewItem. Poniższy przykład tworzy element 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ę kontrolek TreeViewItem. Kontrolka TreeViewItem to HeaderedItemsControl, która ma Header i kolekcję Items.

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

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

Aby zdefiniować układ kontrolki TreeViewItem, można również użyć obiektów HierarchicalDataTemplate. Aby uzyskać więcej informacji i przykład, zapoznaj się z Use SelectedValue, SelectedValuePath i SelectedItem.

Jeśli element nie jest kontrolką TreeViewItem, jest automatycznie ujęty przez kontrolkę TreeViewItem, gdy kontrolka TreeView zostanie wyświetlona.

Rozszerzanie i zwijanie elementu TreeViewItem

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

Gdy metoda BringIntoView jest wywoływana w kontrolce TreeViewItem, TreeViewItem i jej kontrolki TreeViewItem nadrzędnej rozszerzają się. Jeśli TreeViewItem nie jest widoczna lub częściowo widoczna, TreeView przewija ją, aby była widoczna.

Wybór elementu TreeViewItem

Gdy użytkownik kliknie kontrolkę TreeViewItem, aby ją wybrać, wystąpi zdarzenie Selected, a jego właściwość IsSelected ma wartość true. TreeViewItem staje się również SelectedItem kontrolki TreeView. Natomiast, gdy wybór zmienia się z kontrolki TreeViewItem, występuje jego zdarzenie Unselected, a właściwość IsSelected jest ustawiana na false.

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

Użyj właściwości SelectedValuePath, aby określić wartość SelectedValue dla SelectedItem. Więcej informacji znajdziesz w Use SelectedValue, SelectedValuePath i SelectedItem.

Program obsługi zdarzeń można zarejestrować w zdarzeniu SelectedItemChanged w celu określenia, kiedy wybrany TreeViewItem się zmienia. RoutedPropertyChangedEventArgs<T>, który jest dostarczany do programu obsługi zdarzeń, określa OldValue, który jest poprzednim wyborem, a NewValue, który jest bieżącym wyborem. Wartość może być null, jeśli aplikacja lub użytkownik nie dokonał poprzedniego lub bieżącego wyboru.

Styl widoku drzewa

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

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

W poniższym przykładzie pokazano, jak ustawić wartości właściwości Foreground i FontSize dla kontrolki TreeViewItem przy użyciu 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 Header zawartości TreeViewItemmożna uwzględnić więcej niż jeden obiekt. Aby uwzględnić wiele obiektów w zawartości Header, należy ująć obiekty wewnątrz kontrolki układu, na przykład Panel lub StackPanel.

W poniższym przykładzie pokazano, jak zdefiniować Header TreeViewItem jako CheckBox i TextBlock, które znajdują się w kontrolce DockPanel.

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

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

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

Udostępnij za pośrednictwem