TreeView の概要
更新 : 2007 年 11 月
TreeView コントロールは、折りたたみ可能なノードを使用して、階層構造で情報を表示する手段を提供します。ここでは、TreeView および TreeViewItem コントロールについて説明し、簡単な使用例を示します。
このトピックには次のセクションが含まれています。
- TreeView とは
- TreeView の作成
- TreeViewItem の展開と折りたたみ
- TreeViewItem の選択
- TreeView のスタイル
- TreeView 項目へのイメージおよび他のコンテンツの追加
- 関連トピック
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 のコンテンツを定義することもできます。
また、HierarchicalDataTemplate オブジェクトを使用して、TreeViewItem コントロールのレイアウトを定義できます。詳細および使用例については、「方法 : 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 に設定されるときです。
SelectedValue プロパティと SelectedValuePath プロパティを使用して、SelectedItem に値を割り当てます。詳細については、「方法 : 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 を、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>