WPF のコントロールは種類が多く、
公式ドキュメントを見ても体系的に理解しづらいと感じることがあります。
しかし、**「中身をどう扱うか」**という観点で見ると、
WPF のコントロールは 概ね3 種類 に整理できます。
-
ContentControl … 唯一の子要素を持つコントロール
-
ItemsControl … 複数の要素を持つコントロール
-
Panel … UIを要素を並べるコントロール
ContentControl
ContentControl は 1 つの Content を表示するためのコントロールです。
-
Contentプロパティを持つ -
中身は
UIElementに限らず、任意のオブジェクトを指定できる -
見た目は
ControlTemplateやDataTemplateによって決まる
代表的なコントロール
-
Button
-
Label
-
ContentControl
-
GroupBox / Expander（Header 付き派生）
Button の中に TextBlock や Image を自由に置けるのは、
Button が ContentControl だからです。
ItemsControl
ItemsControl は 複数のアイテムをコレクションとして扱うコントロールです。
-
Items/ItemsSourceを持つ -
各アイテムは
DataTemplateで UI に変換される -
内部的には Panel を使ってレイアウトされる
代表的なコントロール
-
ListBox
-
ComboBox
-
ListView / DataGrid
-
TreeView
-
Menu
ItemsControl は UI を直接並べるのではなく、データを並べる点が重要です。
Panel
Panel は レイアウト専用のクラスです。
-
Childrenコレクションを持つ -
子要素は
UIElement -
DataTemplate や ItemsSource は関係しない
代表的な Panel
-
StackPanel
-
Grid
-
DockPanel
-
Canvas
-
WrapPanel
Panel は データ駆動ではなく、UI 直配置のための仕組みです。
入力系コントロールについて
WPF のコントロールは役割で見ると、大きく
-
コンテナ系コントロール
-
入力系コントロール
の 2 系統に分けることができます。
本記事で扱っている
ContentControl / ItemsControl / Panel は、すべて コンテナ系です。
一方で、TextBox や CheckBox などの 入力系コントロールは、
役割が根本的に異なるため、同列には扱いません。
入力系コントロールの役割
入力系コントロールの主な役割は、
-
値を表示する
-
値を編集する
-
状態をユーザーに伝える
ことです。
代表的な入力系コントロール
-
TextBox
-
CheckBox / RadioButton
-
Slider
-
ProgressBar
-
DatePicker
これらは UI の「部品」であり、
画面構造を作るための箱ではありません。
コンテナ系と決定的に違う点
入力系コントロールは、次の特徴を持ちます。
-
Contentを自由に持たない -
ItemsやChildrenを持たない -
DataTemplate による展開が前提ではない
つまり、
中身を入れる・並べるための仕組みを持たない
という点で、
ContentControl / ItemsControl / Panel とは設計思想が異なります。
系統別に見る WPF コントロールの具体的な使い方
以下では、
ContentControl / ItemsControl / Panel / 入力系
それぞれの 役割と使いどころを整理します。
ContentControl の使い方
ContentControl は、
「1 つの値（変数）」に対応させる構造を持つコントロールです。
-
Contentプロパティに 1 つの値をセットする -
その値がどのように表示されるかはテンプレートで決まる
この「1 つの値」という点が重要で、
プリミティブな値だけでなく、
クラスのオブジェクトなど複雑な構造も扱えます。
入れ子構造の表現
ContentControl の Content に UIElement を指定すれば、
UI を入れ子構造として表現することも可能です。
例：
-
Button
-
子：StackPanel
-
子：Image
-
子：TextBlock
-
-
これは、
「Button に 1 つの Content を設定している」
という構造を、
その Content が 複数要素を内包する UIになっているだけです。
👉
ContentControl は「1 つの値（1 つの世界）」を表示するためのコントロール
と言えます。
ItemsControl の使い方
ItemsControl は、
**「複数の要素を持つコンテナ構造」**に対応するコントロールです。
具体的には、
-
List<T> -
ObservableCollection<T> -
配列
といった C# のコレクション構造を、
-
ComboBox
-
ListBox
-
ListView
などの UI として表現します。
ポイント
-
ItemsControl は UI を直接並べるものではない
-
「データの集合」を UI に変換する役割を持つ
-
各要素は DataTemplate によって表示される
👉
ItemsControl は「C# のコンテナ構造を UI に可視化する仕組み」
と考えると分かりやすいです。
Panel の使い方
Panel は、
UI のレイアウトを整えるためのコントロールです。
-
Grid
-
StackPanel
-
DockPanel
-
Canvas
などがこれに該当します。
Panel は、
-
C# の変数構造を表現しない
-
データバインディングの主役にならない
-
UIElement をどのように配置するか、だけを担当する
という点で、
ContentControl や ItemsControl とは性質が異なります。
👉
Panel は C# 的な意味合いが薄く、
純粋に「見た目を整えるための存在」
と言えます。
入力系コントロールの使い方
入力系コントロールは、
ユーザーの入力値を C# 側と連動させることが目的です。
-
TextBox
-
CheckBox
-
RadioButton
-
Slider
-
DatePicker
などがこれに該当します。
入力系コントロールの位置づけ
-
コンテナではない
-
レイアウトの主役ではない
-
C# 側のプロパティとデータバインディングする対象
つまり、
入力系コントロールは
C# のデータモデルと UI を接続するための部品
として扱うのが基本になります。
さいごに
WPF の View は XAML を使って記述するため、
UI コントロールが C# のオブジェクトである感覚が薄れがちです。
しかし本質的には、
すべてのコントロールは C# のクラスから生成されたオブジェクトであり、
XAML はそれを宣言的に記述しているにすぎません。
WPF のコントロールは、
単に UI の見た目を整えるためだけのものではなく、
-
C# 側のデータ構造を UI として表現する
-
View 上の操作や入力を C# 側に伝える
といった 役割を持って分類することができます。
この視点で View の構成を考えると、
見た目のデザインから入るのではなく、
アプリケーションの機能やデータ構造を起点に、
必要最小限の UI を導き出す設計が可能になります。
本記事で整理したコントロールの分類は、
そのための 設計指針として使える知識だと考えています。
コメント