TreeView の概要

  • [アーティクル]

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 です。

Extensible Application Markup Language (XAML) を使用することによって TreeView を定義する場合、TreeViewItem コントロールの Header の内容およびそのコレクションを構成する項目を明示的に定義できます。 前の図では、この方法を示しています。

ItemsSource をデータ ソースとして指定してから HeaderTemplate と ItemTemplate を指定して、TreeViewItem の内容を定義することもできます。

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

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

TreeViewItem の展開と折りたたみ

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

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

TreeViewItem の選択

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

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

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

SelectedItemChanged イベントにイベント ハンドラーを登録することにより、選択されている TreeViewItem が変更されたことを検出できます。 イベント ハンドラーに提供される 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 を CheckBox および TextBlock (両方とも DockPanel コントロールで囲まれています) として定義する方法を示します。

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

関連項目