WPF

C#WPFの道#23!TreeViewの書き方と使い方を解りやすく解説

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

TreeViewとは?

TreeViewとは,階層構造を表すことのできるコントロールです。ちょうどWindowsのファイルエクスプローラーのような感じです。フォルダーの下にフォルダーがあって,その下にファイルがあるみたいな感じで,階層構造になっていますよね。そういう親のしたに子がいて,さらにその子にも子階層があるというような構造をツリー構造(木構造)といい,それを見た目に表すことのできるコントロールという事になります。

TreeViewの書き方

TreeViewの書き方には,あらかじめ表示する内容が決まっている場合等に利用できる「静的」なやり方と,データバインドを使用した「動的」な設定の仕方があります。

静的な書き方

XamlでTreeViewの中にTreeViewItemを作ることで,一つの階層を作ることができます。そのTreeViewItemにもさらにTreeViewItemを作成することができ,その繰り返しにより,親子関係を定義します。階層に表示される文言はHeaderに設定します。

  • TreeViewItemの中にTreeViewItemを作ることで,親子階層になる
  • TreeViewItemのHeaderが階層のタイトルになる

実行例

TreeViewItem.Headerを利用することで,文言の部分をマーク付きの文言にするなどの加工が簡単に行えます。

  • TreeViewItemに直接Headerを指定せず,Headerを定義
  • HeaderにStackPanelを定義し,任意のコントロールを配置
  • 赤い丸の右にテキストブロックで文言を表示

実行例

データバインディングを使った動的な設定例

  • まずデータバインディングを行うための型となるクラスを作成します。ここではDtoとしています。
  • Dtoは階層名を表示するためのNameプロパティと,自分自身の子階層を表すDtosのプロパティがあります。
  • Dtosのプロパティは,親階層と同じDtoクラスのListになっています。
  • PrivateフィールドにDtoのリストを生成しています(_dtos)。これがTreeViewのItemsSourceとなります。
  • dto1を生成しています。これは親階層のNameを「Name1」とし,その子階層を「Name1-1」「Name1-2」としています。
  • dto1を_dtosにAddし,それをCTreeViewのItemsSourceにセットしています。
  • TreeViewの名前をCTreeViewにしています。
  • ItemTemplateとHierarchicalDataTemplateのエリアを作成
  • HierarchicalDataTemplateのDataTypeに階層の型となるクラス名「Dto」を指定します
  • ItemsSourceにはDtoの子階層のプロパティ名を指定します「Dtos」
  • 階層名として表示するエリアをTextBlockで表示するためにNameをBindingします

実行結果

サンプルコード全体

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。