C# Forms AppプログラマのためのWPF(XAML)解説

普段のプログラミングはWindows Forms Application(以下「WFA」)の方向けのWPFの解説です。
高性能なものが作れるかは微妙ですが、ビジュアル面で美しいアプリケーションが作れるWPFも魅力的なものです。
なお、ここではフォームアプリケーションであるWPFのほかに、SilverlightやWindows Phone、Windows Storeアプリも同時にWPFとして解説します。特記がない限り、WPFと共通です。

1. デザイナー

1. HTMLライクなデザイン仕様

WPFではHTMLのようなXMLフォーマットのテキストでデザインしていきます。
はじめの内はデザイナーを使っていくほうがいいと思います。しかし慣れたらテキストを直接いじったほうが簡単でしょう。
XMLライクなデザインの仕方を学びたい場合はまずHTMLをざっと勉強しておくと理解しやすいです。
HTMLも書ける人向けの表を用意しておきます。

2. Formの代わりのWindow

 
WFAとWPFはかなり違います。例えばFormをWPFではWindowといい、PanelはGridです。
ただコントロールの名称が違うだけで、対応しているコントロールをひと通り覚えてしまえば後は簡単です。
あとは表示されてしまえば同じようなもの。割りきって考えるとすらすら覚えることができます。

3. 基本的にDockはFill、サイズやポジションの指定方法

WPF、というよりXAMLでは、コントロールにプロパティを指定しない限りDockはFillの状態です。
これはPanel(Grid)であろうがTextBoxであろうが基本的にFillなのです。
では通常の表示をさせるにはどうすればいいのでしょうか。

HorizontalAlignment/VerticalAlignmentを使う方法

“HorizontalAlignment”プロパティと“VerticalAlignment”プロパティを指定します。
いわば左寄せとか中央寄せみたいなもの。規定値ではStretch(伸縮)となっています。
いつもどおりの表示をさせたい場合はそれぞれ、LeftとTopを指定してあげれば期待通りの表示になります。
サイズ指定もいつもどおりWidthとHeightです。
また、ポジション指定はMarginプロパティ、TopとLeftだけ指定し、RightとBottomは無視します。

Marginで指定する方法

前項の「HorizontalAlignment/VerticalAlignmentプロパティ」を使用しない場合、WPFではWFAでいうAnchorが4方向すべてに付いた状態になっています。
そのため、WidthやHeightは意味をなしません。
もしも横幅や高さを指定したいときはどうすればいいでしょうか。
その時はMarginプロパティをうまい具合に設定し、親であるWindows(又はUserControl)のWidth/Heightからしてください。
案外どうにでもなります。

HTMLを知っている人へ

普通、Marginで指定した場合、他のコントロールにも影響が出ると思います。しかしWPFにはそんなことはありません。
全て、親のパネル(HTMLでいうdiv)からの絶対位置で計算されます。
他のコントロールを配慮した相対位置ではありません。

 

4. タッチを意識したUI設計

WPFにはTouch関係のイベントも存在します。ですがMouseイベントで代用できます。私はこちらの方をオススメ致します。
そもそもWindowsタブレットは通常通り、マウスを接続し使うこともできるのでタッチとマウスで差別化を図る必要はないかと思われます。

5. アニメーション

WPFでは手軽にアニメーションを定義することができます。
これに関しては奥深いものになりますので他記事を参照ください。