TreeView の概要TreeView Overview

TreeView コントロールには、折りたたみ可能なノードを使用して、階層構造で情報を表示する方法が用意されています。The TreeView control provides a way to display information in a hierarchical structure by using collapsible nodes. このトピックでは、TreeView コントロールと TreeViewItem コントロールについて説明し、その使用法の簡単な例を示します。This topic introduces the TreeView and TreeViewItem controls, and provides simple examples of their use.

TreeViewとはWhat Is a TreeView?

TreeView は、TreeViewItem コントロールを使用することによって項目を入れ子にする ItemsControl です。TreeView is an ItemsControl that nests the items by using TreeViewItem controls. TreeView を作成する例を次に示します。The following example creates a 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 の作成Creating a TreeView

TreeView コントロールには、TreeViewItem コントロールの階層が含まれています。The TreeView control contains a hierarchy of TreeViewItem controls. TreeViewItem コントロールは、HeaderItems コレクションが含まれる HeaderedItemsControl です。A TreeViewItem control is a HeaderedItemsControl that has a Header and an Items collection.

Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) を使用することによって TreeView を定義する場合、TreeViewItem コントロールの Header の内容およびそのコレクションを構成する項目を明示的に定義できます。If you are defining a TreeView by using Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML), you can explicitly define the Header content of a TreeViewItem control and the items that make up its collection. 前の図では、この方法を示しています。The previous illustration demonstrates this method.

ItemsSource をデータ ソースとして指定してから HeaderTemplateItemTemplate を指定して、TreeViewItem の内容を定義することもできます。You can also specify an ItemsSource as a data source and then specify a HeaderTemplate and ItemTemplate to define the TreeViewItem content.

TreeViewItem コントロールのレイアウトを定義するには、HierarchicalDataTemplate オブジェクトも使用できます。To define the layout of a TreeViewItem control, you can also use HierarchicalDataTemplate objects. 詳細と例については、「Use SelectedValue, SelectedValuePath, and SelectedItem」を参照してください。For more information and an example, see Use SelectedValue, SelectedValuePath, and SelectedItem.

項目が TreeViewItem コントロールでない場合は、TreeView コントロールが表示されるときに、項目が TreeViewItem コントロールによって自動的に囲まれます。If an item is not a TreeViewItem control, it is automatically enclosed by a TreeViewItem control when the TreeView control is displayed.

TreeViewItem の展開と折りたたみExpanding and Collapsing a TreeViewItem

ユーザーが TreeViewItem を展開すると、IsExpanded プロパティは true に設定されます。If the user expands a TreeViewItem, the IsExpanded property is set to true. ユーザーが直接操作しなくても、IsExpanded プロパティを true (展開) または false (折りたたみ) に設定することによって、TreeViewItem を展開したり折りたたんだりすることができます。You can also expand or collapse a TreeViewItem without any direct user action by setting the IsExpanded property to true (expand) or false (collapse). このプロパティが変更されると、Expanded または Collapsed イベントが発生します。When this property changes, an Expanded or Collapsed event occurs.

TreeViewItem コントロールで BringIntoView メソッドが呼び出されると、TreeViewItem とその親の TreeViewItem コントロールが展開されます。When the BringIntoView method is called on a TreeViewItem control, the TreeViewItem and its parent TreeViewItem controls expand. TreeViewItem が非表示または部分的な表示になっている場合は、表示されるように TreeView がスクロールします。If a TreeViewItem is not visible or partially visible, the TreeView scrolls to make it visible.

TreeViewItem の選択TreeViewItem Selection

ユーザーが TreeViewItem コントロールをクリックしてそれを選択すると、Selected イベントが発生し、その IsSelected プロパティが true に設定されます。When a user clicks a TreeViewItem control to select it, the Selected event occurs, and its IsSelected property is set to true. また、TreeViewItem は、TreeView コントロールの SelectedItem になります。The TreeViewItem also becomes the SelectedItem of the TreeView control. 逆に、選択が TreeViewItem コントロールから変更されると、その Unselected イベントが発生し、その IsSelected プロパティが false に設定されます。Conversely, when the selection changes from a TreeViewItem control, its Unselected event occurs and its IsSelected property is set to false.

TreeView コントロールの SelectedItem プロパティは読み取り専用プロパティであるため、明示的に設定することはできません。The SelectedItem property on the TreeView control is a read-only property; hence, you cannot explicitly set it. ユーザーが TreeViewItem コントロールをクリックした場合、または、TreeViewItem コントロールで IsSelected プロパティが true に設定された場合、SelectedItem プロパティが設定されます。The SelectedItem property is set if the user clicks on a TreeViewItem control or when the IsSelected property is set to true on the TreeViewItem control.

SelectedItemSelectedValue を指定するには、SelectedValuePath プロパティを使用しします。Use the SelectedValuePath property to specify a SelectedValue of a SelectedItem. 詳細については、「SelectedValue、SelectedValuePath、および SelectedItem を使用する」を参照してください。For more information, see Use SelectedValue, SelectedValuePath, and SelectedItem.

SelectedItemChanged イベントにイベント ハンドラーを登録することにより、選択されている TreeViewItem が変更されたことを検出できます。You can register an event handler on the SelectedItemChanged event in order to determine when a selected TreeViewItem changes. イベント ハンドラーに提供される RoutedPropertyChangedEventArgs<T> では、前の選択項目である OldValue と、現在の選択項目である NewValue が指定されています。The RoutedPropertyChangedEventArgs<T> that is provided to the event handler specifies the OldValue, which is the previous selection, and the NewValue, which is the current selection. アプリケーションまたはユーザーが以前または現在の選択を行っていない場合、どちらの値も null にできます。Either value can be null if the application or user has not made a previous or current selection.

TreeView のスタイルTreeView Style

既定のスタイルの TreeView コントロールは、ScrollViewer コントロールが格納されている StackPanel オブジェクト内に配置されます。The default style for a TreeView control places it inside a StackPanel object that contains a ScrollViewer control. TreeView に対して Width プロパティと Height プロパティを設定すると、これらの値を使用して、TreeView が表示される StackPanel オブジェクトのサイズが設定されます。When you set the Width and Height properties for a TreeView, these values are used to size the StackPanel object that displays the TreeView. 表示される内容が表示領域より大きい場合、ScrollViewer は、ユーザーが TreeView の内容をスクロールできるように自動的に表示されます。If the content to display is larger than the display area, a ScrollViewer automatically displays so that the user can scroll through the TreeView content.

TreeViewItem コントロールの外観をカスタマイズするには、Style プロパティにカスタムの Style を設定します。To customize the appearance of a TreeViewItem control, set the Style property to a custom Style.

次の例では、Style を使用して TreeViewItem コントロールのForeground プロパティと FontSize プロパティの値を設定する方法を示します。The following example shows how to set the Foreground and FontSize property values for a TreeViewItem control by using a Style.

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

TreeView 項目へのイメージとその他のコンテンツの追加Adding Images and Other Content to TreeView Items

TreeViewItemHeader の内容には、複数のオブジェクトを含めることができます。You can include more than one object in the Header content of a TreeViewItem. Header の内容に複数のオブジェクトを含めるには、PanelStackPanel などのレイアウト コントロールでオブジェクトを囲みます。To include multiple objects in Header content, enclose the objects inside a layout control, such as a Panel or StackPanel.

次の例では、TreeViewItemHeaderCheckBox および TextBlock (両方とも DockPanel コントロールで囲まれています) として定義する方法を示します。The following example shows how to define the Header of a TreeViewItem as a CheckBox and TextBlock that are both enclosed in a DockPanel control.

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

次の例では、DockPanel コントロールで囲まれた Image および TextBlock が含まれる DataTemplate を定義する方法を示します。The following example shows how to define a DataTemplate that contains an Image and a TextBlock that are enclosed in a DockPanel control. DataTemplate を使用して、TreeViewItemHeaderTemplate または ItemTemplate を設定できます。You can use a DataTemplate to set the HeaderTemplate or ItemTemplate for a TreeViewItem.

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

関連項目See also