TreeView の概要

[アーティクル]
12/18/2024

TreeView コントロールは、折りたたみ可能なノードを使用して階層構造に情報を表示する方法を提供します。このトピックでは、TreeView コントロールと TreeViewItem コントロールについて説明し、その使用方法の簡単な例を示します。

TreeView とは

TreeView は、TreeViewItem コントロールを使用して項目を入れ子にする ItemsControl です。次の例では、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>

TreeView の作成

TreeView コントロールには、TreeViewItem コントロールの階層が含まれています。 TreeViewItem コントロールは、Header と Items コレクションを持つ HeaderedItemsControl です。

拡張アプリケーションマークアップ言語 (XAML) を使用して TreeView を定義する場合は、TreeViewItem コントロールの Header コンテンツとそのコレクションを構成する項目を明示的に定義できます。前の図は、この方法を示しています。

データソースとして ItemsSource を指定し、HeaderTemplate と ItemTemplate を指定して TreeViewItem コンテンツを定義することもできます。

TreeViewItem コントロールのレイアウトを定義するには、HierarchicalDataTemplate オブジェクトを使用することもできます。詳細と例については、「 SelectedValue、SelectedValuePath、SelectedItemを使用する」を参照してください。

項目が TreeViewItem コントロールでない場合は、TreeView コントロールが表示されるときに、TreeViewItem コントロールで自動的に囲まれます。

TreeViewItem の展開と折りたたみ

ユーザーが TreeViewItemを展開すると、IsExpanded プロパティは trueに設定されます。また、IsExpanded プロパティを true (展開) または false (折りたたみ) に設定することで、直接ユーザー操作なしで TreeViewItem を展開または折りたたむこともできます。このプロパティが変更されると、Expanded または Collapsed イベントが発生します。

BringIntoView メソッドが TreeViewItem コントロールで呼び出されると、TreeViewItem とその親 TreeViewItem コントロールが展開されます。 TreeViewItem が表示されない場合、または部分的に表示されていない場合は、TreeView がスクロールして表示されます。

TreeViewItem の選択

ユーザーが TreeViewItem コントロールをクリックして選択すると、Selected イベントが発生し、その IsSelected プロパティが trueに設定されます。 TreeViewItem は、TreeView コントロールの SelectedItem にもなります。逆に、選択が TreeViewItem コントロールから変更されると、その Unselected イベントが発生し、その IsSelected プロパティが falseに設定されます。

TreeView コントロールの SelectedItem プロパティは読み取り専用プロパティです。そのため、明示的に設定することはできません。 SelectedItem プロパティは、ユーザーが TreeViewItem コントロールをクリックした場合、または IsSelected プロパティが TreeViewItem コントロールの true に設定されている場合に設定されます。

SelectedValuePath プロパティを使用して、SelectedItemの SelectedValue を指定します。詳細については、「SelectedValue、SelectedValuePath、SelectedItemの使用方法」を参照してください。

選択した TreeViewItem がいつ変更されたのかを判断するために、SelectedItemChanged イベントにイベントハンドラーを登録できます。イベントハンドラーに提供される RoutedPropertyChangedEventArgs<T> は、前の選択範囲である OldValueと、現在の選択範囲である NewValueを指定します。アプリケーションまたはユーザーが以前または現在の選択を行っていない場合は、どちらの値も null できます。

TreeView スタイル

TreeView コントロールの既定のスタイルは、ScrollViewer コントロールを含む StackPanel オブジェクト内に配置されます。 TreeViewの Width プロパティと Height プロパティを設定すると、これらの値を使用して、TreeViewを表示する StackPanel オブジェクトのサイズを設定します。表示するコンテンツが表示領域よりも大きい場合は、ScrollViewer が自動的に表示され、ユーザーは TreeView コンテンツをスクロールできます。

TreeViewItem コントロールの外観をカスタマイズするには、Style プロパティをカスタム Styleに設定します。

次の例では、Styleを使用して、TreeViewItem コントロールの Foreground と FontSize プロパティの値を設定する方法を示します。

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

TreeView 項目へのイメージとその他のコンテンツの追加

TreeViewItemの Header コンテンツに複数のオブジェクトを含めることができます。 Header コンテンツに複数のオブジェクトを含めるには、Panel や StackPanelなどのレイアウトコントロール内でオブジェクトを囲みます。

次の例では、TreeViewItem の Header を DockPanel コントロールで囲まれた CheckBox と TextBlock として定義する方法を示します。

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

次の例は、DockPanel コントロールで囲まれた Image と TextBlock を含む DataTemplate を定義する方法を示しています。 DataTemplate を使用して、TreeViewItemの HeaderTemplate または ItemTemplate を設定できます。

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

次の方法で共有