Simplestar Game
since 17/01/2009
:::::::::::046話 Hello WPF:::::::::::
Windows 環境でリアルタイム3Dシミュレーションを行えるアプリの作成を考えたとき
Direct X と Bullet Physics を C++ 言語で利用して作成する、というのが私の答えです。
描画に使用するモデルデータは Blender から作成します。
全体の開発工程の中には Blender が出力する中間データを加工して
実際に使用するデータ形式に変換するという作業が存在します。
この作業で必要になるツール（GUIアプリ）はデータを読み込み、編集し、出力する。
ただこれだけの機能を提供します。
さて、このツール、どうやって用意しましょう？
私が扱えるコンピュータ言語は C++, C#, VBA くらい。（C#, VBA は C++ と比べて経験が浅いです）
そんな私が C++ 言語でGUIを扱う場合の選択肢はコチラ↓
（VisualStudio で新規プロジェクトを作成する際のウィザード選択画面）
また C# で GUI を扱う場合の選択肢はコチラ↓
（VisualStudio で新規プロジェクトを作成する際のウィザード選択画面）
選択肢といえど、私はこれらのアプリケーションを最初から最後まで完成させたことがありません。
（メンテナンスはお仕事でよくしていますが…）
どれか一つはできるようになりたい、そんなこんなで、それぞれの選択肢のメリット、デメリットを調べてみました。
結果、私は WPF でツールを作りたい、作れるようになりたい、そう思えるようになったのです。
（純粋に技術ページを読みたいこともあるので、イラストはクリックしない限り表示されないようにしました。）
はい、いつものことながら前置き長いですね。
ということでここから本題に入ります。
最初に一番簡単な WPF アプリケーションを作ってみましょう。
はい、ということで作りました。
次のリンク先をクリックしてみてください。
次のようなページへジャンプすると思います。
この XML に似ている拡張子 .xaml は、XAML（ザムル）と読みます。
このテキストファイルには次に示すコードが書かれています。
おそらくこれが最小の WPF アプリケーションではないかと思います。
さて、アプリと言う割に、これでは起動と表示しかできませんね。
ロジックはどこに組むのでしょうか？
ここで、 WPF の仕組みについて少し学んでみましょう。
WPF の仕組み
「XAMLコード＋分離コード」で作成する。要は見た目（＝外観）とロジックの分離ができる。
ただこれだけを認識してくれれば良いかなぁと思います。
そこもっと詳しく！なんて興味がある方は、次に示す記事に詳細が書かれていますので確認してみてください。
これを読んで「もう大丈夫、自分は WPF でアプリケーションを開発できる」という方はこの先を読む必要はありません。
XAMLコード＋分離コード、これが WPF の仕組み、ということでロジックを分離コードに書いてみましょう。
例として、先ほどのアプリケーションの Hello World の文字列を現在の時刻にするようにしてみます。
その場合、次のように記述します。
アプリケーションなので、次のようにスタートアップ用の決まり文句も用意しないといけません。
で、それぞれの分離コードというものが次の通り。
作られた実行ファイルがこちら↓になります。
実行すると次に示す通り、起動したときの時刻が表示されます。
分離コードの言語は C# に限定されてはおらず
.NET Framework 上で動作するアプリケーションを開発するためのプログラミング言語ならば
WPF アプリケーションを開発できると思います。
次に示すように VisualVasic から作れることは確認できました。
（VisualStudio で新規プロジェクトを作成する際のウィザード選択画面）
なんとなく WPF について掴めてきたところで、VisualStudio を使って一般的な WPF アプリケーションの開発を見てみましょう。
VisualStudio を使って WPF アプリケーション作成
開発環境 VisualStudio 2010 Pro.
最初は新規プロジェクトから C# WPF アプリケーションを選択します。
何もしない状態でビルドすると、次のように空のウィンドウアプリケーションが出来上がります。
初期の XAMLコードはこんな感じ↓
ツールボックスをのぞいてみましょう。
すべての WPF コントロールには実はすべてのコントロールが表示されていません（なんだってー！？）
全部表示するには次の操作を行います。
ツールボックス上で右クリックして「アイテムの選択」を選択します。
すると、「ツールボックスアイテムの選択」のダイアログが表示されます。（下図）
確認するとわかると思いますがほとんどのコントロールが隠されています。
試しに InkCanvas というコントロールにチェックを入れて「OK」を押してみましょう。
リストの末尾に InkCanvas コントロールが追加されました。
これをクリックして、ウィンドウ上に置いてみます。（この辺はフィーリングで）
こんな感じで置きました↓
すると XAML コードが勝手に次のように書き換わります。
ビルドした成果物の確認をしてみます。
配置したキャンバスの上でマウスドラッグすると線を引けるようになっていました。
この InkCanvas コントロールの良いところはペンタブの筆圧感知を最初からサポートしているところです。
お絵かきアプリとか、もしかしたら簡単に作れちゃうのかもしれませんね。
さて、この膨大にあるコントロールの説明はどこに書かれているのでしょうか？
参考書を読めばすべて書いてあるかも？
いえいえ、一個一個プロパティとか説明してたら一般的な書物のページに収まりきらないだろう。
ここはオンラインドキュメントを探してみましょう。すると、次のページにたどりつきました。
何をどう変更すると、どうなるか、についてはこのページでいいかもしれません。
ただ、消しゴム機能をつけたい、と考えた時はどうすれば良いでしょうか？
そういった誰でも疑問に思うことは探せばネット上に答えがあったりします。
こちらのページ↓が参考になりそうでした。
さて、とりあえず VisualStudio から WPF アプリを簡単にですが開発してみました。
WPF 入門の最初の一歩ということで、今回はこのあたりにしておきましょう。
次回からはライフタイム、エラー処理、リソースと構成、データバインディング、アニメーションなど
WPF を使うなら、これを知ってないでどうする！ みたいな内容を紹介していこうと思います。
2012/04/07 初記。
2012/04/12 更新。