1月ほど間があきましたが、RIAアーキテクチャ研究会やめとべやでの発表も終わりひと段落ついたので、ちまちま再開していきたいなと思います。過去記事一覧が長くなってきたので、今回からは末尾にもってくようにしました。
TreeViewコントロール
TreeViewコントロールは、Windowsのエクスプローラーの左側のような入れ子構造のデータを表示するのに適したコントロールです。TreeViewコントロールの見た目を以下に示します。
TreeViewコントロールは、ItemsプロパティにTreeViewItemコントロールを設定することで木構造のデータを表現します。TreeViewItemコントロールは、Headerプロパティでツリーに表示する要素を指定して、ItemsプロパティでTreeViewItemコントロールを子として格納します。TreeViewコントロールもTreeViewItemコントロールもItemsプロパティがコンテンツプロパティなので、シンプルに木構造をXAMLで定義できます。以下に、上図のTreeViewコントロールのXAMLの定義を示します。
<TreeView> <TreeViewItem Header="Item1"> <TreeViewItem Header="Item1-1"> <TreeViewItem Header="Item1-1-1" /> <TreeViewItem Header="Item1-1-2" /> <TreeViewItem Header="Item1-1-3" /> </TreeViewItem> <TreeViewItem Header="Item1-2"> <TreeViewItem Header="Item1-2-1" /> <TreeViewItem Header="Item1-2-2" /> </TreeViewItem> </TreeViewItem> <TreeViewItem Header="Item2" IsExpanded="True"> <TreeViewItem Header="Item2-1" IsExpanded="True" IsSelected="True"> <TreeViewItem Header="Item2-1-1" /> <TreeViewItem Header="Item2-1-2" /> <TreeViewItem Header="Item2-1-3" /> </TreeViewItem> </TreeViewItem> </TreeView>
上記XAMLにあるように、IsExpandedプロパティでツリーが展開されているかどうか。IsSelectedプロパティで選択中のノードを指定します。
ここまでに出てきたTreeViewコントロールのプロパティを以下に示します。
プロパティ名 | 説明 |
---|---|
ItemCollection Items { get; } | TreeViewコントロールに表示する要素を格納するコレクションを取得します。 |
ここまでに出てきたTreeViewItemコントロールのプロパティを以下に示します。
プロパティ名 | 説明 |
---|---|
object Header { get; sest; } | ツリーに表示する要素を取得または設定します。コンテンツモデルで紹介した表示ロジックによって要素が表示されます。 |
ItemsCollection Items { get; } | TreeViewItemコントロールの子要素を格納するコレクションを取得します。 |
bool IsExpanded { get; set; } | 要素が展開されているかどうかを取得または設定します。 |
bool IsSelected { get; set; } | 要素が選択されているかどうかを取得または設定します。 |
これらのプロパティを組み合わせて使うことで、静的なツリー場合は簡単にWindows Formsでは表現が難しかった表現も簡単に表示することが出来ます。XAMLを以下に示します。
<TreeView> <TreeViewItem IsExpanded="True"> <TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Rectangle Fill="Olive" Width="15" Height="15" /> <TextBlock Text="矢印アイコン" Margin="5,0" /> <Rectangle Fill="Olive" Width="15" Height="15" /> </StackPanel> </TreeViewItem.Header> <TreeViewItem> <TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Grid Margin="2.5"> <Ellipse Width="20" Height="20" Stroke="Olive" StrokeThickness="2" /> <TextBlock Text="↑" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Foreground="Olive" /> </Grid> <TextBlock Text="上矢印" VerticalAlignment="Center" /> </StackPanel> </TreeViewItem.Header> </TreeViewItem> <TreeViewItem> <TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Grid Margin="2.5"> <Ellipse Width="20" Height="20" Stroke="Olive" StrokeThickness="2" /> <TextBlock Text="→" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Foreground="Olive" /> </Grid> <TextBlock Text="右矢印" VerticalAlignment="Center" /> </StackPanel> </TreeViewItem.Header> </TreeViewItem> …省略… </TreeViewItem> </TreeView>
TreeViewItemコントロールのHeaderプロパティに、StackPanelコントロールやGridコントロールを使って複数のコントロールをレイアウトしています。RectangleやEllipseは、まだ紹介していませんがWPFで基本的な図形を表す要素です。実行結果を以下に示します。
WPFの強力な機能の1つである要素の合成と、TreeViewコントロールを使うことで、オーナードローなどの特別な記述を行わなくても、凝った表示ができることがわかります。
過去記事
- WPF4.5入門 その1 「はじめに」
- WPF4.5入門 その2 「WPFとは」
- WPF4.5入門 その3 「Hello world」
- WPF4.5入門 その4 「Mainメソッドはどこにいった?」
- WPF4.5入門 その5 「全てC#でHello world」
- WPF4.5入門 その6 「WPFを構成するものを考えてみる」
- WPF4.5入門 その7 「XAMLのオブジェクト要素と名前空間」
- WPF4.5入門 その8 「オブジェクト要素のプロパティ」
- WPF4.5入門 その9 「コレクション構文」
- WPF4.5入門 その10 「コンテンツ構文」
- WPF4.5入門 その11 「マークアップ拡張」
- WPF4.5入門 その12 「その他のXAMLの機能」
- WPF4.5入門 その13 「簡単なレイアウトを行うコントロール」
- WPF4.5入門 その14 「レイアウトコントロールのCanvasとStackPanel」
- WPF4.5入門 その15 「レイアウトコントロールのDockPanelとWrapPanel」
- WPF4.5入門 その16 「ViewBoxコントロール」
- WPF4.5入門 その17 「ScrollViewerコントロール」
- WPF4.5入門 その18 「Gridコントロール part 1」
- WPF4.5入門 その19 「Gridコントロール part 2」
- WPF4.5入門 その20 「レイアウトに影響を与えるプロパティ」
- WPF4.5入門 その21 「WPFのコンセプトと重要な機能つまみ食い」
- WPF4.5入門 その22 「Buttonコントロール」
- WPF4.5入門 その23 「DataGridコントロール その1」
- WPF4.5入門 その24 「DataGridコントロール その2」