既に大体覚えてる人は対象外です。都度都度コントロールを調べて覚えてるんだけど、覚えることが多すぎて大変な人向け。
XAML 系プラットフォームのコントロールの特徴
継承を使って色々なコントロールが定義されています。
端的にいうと継承ツリーの中で重要なコントロールについて覚えておくと、他でも使いまわしが効いていいです。
UWP & WPF
UWP と WPF はコントロールの構造が似ています。なので覚え方も大体同じです。大まかに全体に共通することと大きく 4 つのカテゴリーに分けて覚えます。
全体に大体共通
- Style でプロパティの値をまとめて設定できる
- 依存関係プロパティはバインド出来る
- Margin の設定とか幅と高さを持ってる
ContentControl
Content プロパティに設定したものをいい感じに表示してくれる。
見た目を整えるなら Content プロパティに何でもいいからオブジェクト突っ込んで ContentTemplate に DataTemplate を設定して見た目整える。
以下のように色々なコントロールがこれに該当。
- ContentControl
- Window
- ToolTip
- Button
- CheckBox
- RadioButton
- ListBoxItem
- Label
ItemsControl
複数個のデータを表示するコントロール。ItemsSource プロパティにコレクションを設定（もしくはバインド）して、ItemTemplate で 1 項目ごとの見た目を DataTemplate で定義する。
因みにデータの 1 行単位でみると ContentControl です。
- ItemsControl
- ListBox
- TreeView
- Menu
厳密にはちょっと違うけど似た雰囲気として使えるものとして DataGrid がある。
これは 1 セル 1 セルが ContentControl みたいな感じで、編集モードとか表示モードとかあってちょっと複雑。こいつは真面目に覚えるしかない。
Panel
Children プロパティに子要素を置いてレイアウトをいい感じにしてくれる。
- Grid: 行と列を定義して配置する。一番使う。何かレイアウトパネル覚えるならまずこれ。
- StackPanel: 縦並び、横並びが出来る。Grid 覚えたら次はこれでいいと思う
- Canvas: 絶対座標指定。そんなに使わないけど、便利なこともある。
- RelativePanel: UWP のみだけど便利。相対座標での配置もなれれば楽。レスポンシブデザインに対応するのが他の Panel より楽。
- DockPanel: WPF のみだったかな？（UWP の Toolkit に入ってたかも？) 聖杯レイアウトが出来る。アプリの大枠切るのに便利。
- WrapPanel: WPF のみ。UWP は Toolkit にある。横並び縦並びで端まで行くと折り返すレイアウト
その他
諦めて個別に覚えよう。
総括
ということで以下のクラスを重点的にリファレンスを見て、どんな機能が定義されるのかをまずみましょう。
- FrameworkElement
- Control
↑のクラスは、ほぼすべてのコントロールの先祖にあたるため、ここにあるものは他のコントロールで使えます。覚えて損なし。
次に以下の 2 つのコントロールの使い方を見てみよう。
- ContentControl
- ItemsControl
1 項目を表示するコントロールと、複数のデータを表示するコントロールのベースとなるクラス。
大体のコントロールは上の 2 つのどちらから継承してたりすることが多いので、この 2 つを覚えてると、どんなコントロールでも見た目を思い通りに定義しやすくなります。
そして Grid コントロールでのレイアウトの仕方を覚えておけば思った通りの見た目は大体出来ると思います。
Xamarin.Forms
Xamarin.Forms は XAML だけど、UI コントロールが最終的に各プラットフォームのネイティブコントロールに直接マッピングされたりするに関係上かわかりませんが、ContentControl とかがなかったりして勝手が少し違います。
似たコントロールとして ContentView がありますが、そんなに継承しているクラスは多くない感じなので覚えても費用対効果がそんなに高くなかったりします。
でも、ItemsControl と同じノリで使える感じのものは多いです。これは覚える価値あり。
- ItemsControl
- CollectionView
- TaggedPage: ItemsSource とは継承関係にないですが ItemsSource プロパティと ItemTemplate プロパティを持ってる
レイアウトパネルは UWP や WPF と大体同じですが StackPanel じゃなくて StackLayout だったり微妙に名前違うものがあってちょっと戸惑います。
あとは FlexLayout という Web の CSS Flexbox と同じノリでレイアウトを組めるやつがあるので、そこらへんもおさえておくといいかもです。
まとめ
ということで、UI 系の部品の多くはオブジェクト指向の継承を使って作られてるものが XAML 系では多いので、継承のツリーを見て、肝となる機能を実装している親クラスを見つけて、そいつの機能を抑えることで、そのクラスを継承しているクラスの使い方のほとんどを押さえることが出来るので、費用対効果が高くてオススメです。