@ VisualStudio勉強会 #1

1. WPF 入門
(ことはじめ)
@Posaune
13年3月9日土曜日

2. じこしょーかい
まえかわ ひろし
a.k.a ＠Posaune
やってること
京都アジャイル勉強会 #京アジャ
TABOK勉強会
Blogやってるよ！ →
http://posaune.hatenablog.com/
13年3月9日土曜日

3. すきなもの
.NET言語
C#, F#, XAML系テクノロジ
Emacs歴半年くらい。
ReSharper無しで生きていけない。
TDD
アジャイル開発的なあれこれ
自動化（Jenkinsさん）
UX, HCD（UCD）
Business Model Generation
13年3月9日土曜日

4. さて、本題いきまーす。
3分くらい？
13年3月9日土曜日

5. WPFとは。
13年3月9日土曜日

6. Windows Presentation Foundation
Windows用のプレゼンテーション層向けのフレームワー
ク。
Microsoft公式。
描画エンジンがGDIベースからDirectXベースに置き換わ
り、いろいろパワーアップ。
主な採用アプリ：
Visual StudioなどのMS系ツール
Github for Windows
Sharp Develop
50分でとても伝えきれる量ではないので、今日はまず、
ほんのさわり。
13年3月9日土曜日

7. よくいわれる表現
「WPFはMicrosoftの最新の描画技術で・・・」
誕生は2006年ですよお客さん。
3.0 → 3.5 → 4.0 → 4.5（Now！）
安定どころかそろそろ枯れてきた気配すら。
同系統の弟妹も沢山（Silverlight, Windows Phone,
Win8 ...）
（不憫な子が多いとか言うな）
VS 2012 SP2ではこれまで5万くらいしてた開発環境
が同梱される気配・・・
13年3月9日土曜日

8. いつやるか？
13年3月9日土曜日

9. いつやるか？
13年3月9日土曜日

10. まずはVS上でご紹介
ここまで5分くらい？
13年3月9日土曜日

11. 柔軟なUIレイアウト
Windows Formでよくあること
ボタンの中に画像と文字を・・・
コンボボックス内に画像も・・・
タブに閉じるボタンを・・・
こんにちわオーナードロー。
ではWPFは？
13年3月9日土曜日

12. デモ① コントロールが
こんなところに。
13年3月9日土曜日

13. 階層化されたUI構造
ボタンの中に入るのは文字でなく、別のUIオブジェクト。
ほとんどのUIオブジェクトは別のUIオブジェクトを格納可
能。
必然的に再帰的な階層構造を持つ。
<Button>
<Grid>
<TextBlock><Run Text="Click Me!"/></TextBlock>
<Image Source="testImage.jpeg" Stretch="Fill"/>
</Grid>
</Button>
伊達や酔狂でXMLにUI書いてる訳ではないのです。
あ、これをXAMLといいます。
13年3月9日土曜日

14. UI描画はいじり放題
再びWindow Formでよくあること
スクロールバーの色変えたい
Macみたいなスライダーがいいよ―
ボタンももっとMacっぽく・・・
むりなのー？じゃあせめてメトロっぽく！
こんにちわオーナードロー
ではWPFは？
13年3月9日土曜日

15. デモ②：
GDIとは違うのだよ、GDIとは。
13年3月9日土曜日

16. これがWPFの威力です（ﾄﾞﾔｧ
コントロールの描画はほぼ完全にカスタマイズ可能
ボタンだろうがコンボボックスだろうかスクロー
ルバーだろうが。
WPFは、UIの描画部分をStyleとTemplateという仕
組みでカスタマイズ！コレ覚えて帰ってね。
ベクターベースの描画なので、拡大しても
くずれない！
拡大・縮小・回転などがプロパティになってる
13年3月9日土曜日

17. StyleとTemplate
Style：
プロパティの変更セットをリソースとして保持す
る仕組み
Template：
コントロールがどう描画されるか、というUI構造
のテンプレートを保持する。
実行時には展開されてる。
プロパティの一つ。（だからStyleで一緒に管理
することが多い）
13年3月9日土曜日

18. デモ：中身を覗き見して
みましょう
13年3月9日土曜日

19. ちょっと脇道：SNOOP
WPF開発での必須ツール。
WPFの描画結果を返してくれる。いわゆるUISpyツー
ル。
他にもEvent監視とかプロパティの表示とか諸々や
ってくれる。
所謂神ツール。
http://snoopwpf.codeplex.com/
13年3月9日土曜日

20. 真打ち登場：
Blend！Blend！
そろそろ20分くらい？
13年3月9日土曜日

21. Blend
XAML系プラットフォーム用のデザインツール
一時期はコレなしのWPFは一種の苦行だった
最近は大分まし。
Adobe Illustrator的な機能が一部追加されたVisual
Studioと思っていただければ。
Visual Studio 2012 Update 2でVS2012にバンドルさ
れる予定。
Expressでも使えるようになる！？
。。。わけではないっぽい
13年3月9日土曜日

22. Blendでできること
UIは作りやすいインターフェースになっている
組込の図形がかなり豊富になっていたり
カラーパネルが使いやすかったり
Pathツールも充実していたり
まぁみてみて。
13年3月9日土曜日

23. 良くあるデモ
反射テキストボックスを作ってみます。
ココらへんを使う
要素の回転・反転
Visual Brush
UI要素をそのままBrushとして用いる
13年3月9日土曜日

24. Blendで作るアニメーション
アニメーションは非常に簡単に作れる。
ストーリーボードを開いて、
変化させたいプロパティをペタペタ変更
変化の度合いもカスタマイズできる。
アニメーションの再生にはイベントやトリガー、ビ
ヘイビアを用いる
まぁやってみましょう。
13年3月9日土曜日

25. 状態に合わせて色々変える
コントロールの状態に合わせた挙動を作成できる。
コントロールに紐づくのでテンプレートの編集か
ら！
Visual State Manager（VSM）が使いやすい
やるよー。
13年3月9日土曜日

26. エフェクト当てよう
エフェクト：
描画の最終段階でかけられるフィルタのようなも
の。
画像編集ツールとかについてるあれみたいなもの
だと思ってもらえれば。
Blend組込のもので結構遊べる
サクッと見てみよう。
13年3月9日土曜日

27. ちょっと脇道： Shazzam
XAMLで使うEffect用の言語“HLSL”のエディタ。
HLSL：High Level Shader Language
DirectXのシェーダに使うのが本来の用途
直ぐに結果が確認できるばかりか、コンパイルして
呼び出し用のコード生成までしてくれる。
割と神。
http://shazzam-tool.com/
こんなんです。
13年3月9日土曜日

28. Behavior
コントロールに色々な動きを付加する仕組み
ボタン押したら何かしたり
マウスで移動できるようにしたり
カスタム化も結構簡単。
http://code.msdn.microsoft.com/Behavior-
beae13a6
組込のをさらっと紹介するよ―。
13年3月9日土曜日

29. AIファイルのインポート
Adobe Illustlatorファイルをインポートできる
もち、ベクター形式で。
ネットにおちてるAIファイルを読ませてみたよ。
13年3月9日土曜日

30. 使わないともったいない
データバインディング
40分くらいたった？
13年3月9日土曜日

31. データバインディング
データ同士を結びつける（バインドする）仕組み。
あるプロパティとあるプロパティをバインドさせる
と、その2つは同期して変わる、的な。
まずは簡単な例から。
13年3月9日土曜日

32. DEMO：
UI要素同士のバインディング
13年3月9日土曜日

33. DataContextとのバインディング
DataContext？？
全てのWPFコントロールが持つプロパティ
DataContextに設定されたオブジェクトとも、デ
ータバインドすることが可能。
特に指定しないと、親のDataContextをこどもが
引き継ぐ。
例えばこんなふうに書けます。
13年3月9日土曜日

34. バインドされるデータは工夫が必要
INotifyPropertyChangedの実装は必須
なかなか面倒くさいので色んなサポートライブラリ
がある。
たとえば、Resharperを入れておくと・・・
WPFのためのアプリケーションフレームワークを使
えば結構楽になる。
13年3月9日土曜日

35. あれ？メソッドは？
ICommandインタフェースを実装することで、メソッ
ドも（間接的に）呼べます。
CallMethodActionでメソッドを直接呼ぶことも可
能。
データバインドをうまく使えばUI側はXAMLのみで書
けるようになる
面倒くさいことを全てフレームワークに押し付け
られる
13年3月9日土曜日

36. データバインドのもう一歩先
ただ単にデータを貼り付けるだけがバインディング
じゃあありません。
バインドされたデータをどう表現するか、はXAMLの
お仕事！
DataTemplateを使って、データを元にUIを作り出し
ます。
13年3月9日土曜日

37. DEMO：
これがDataTemplate！
13年3月9日土曜日

38. 対応を示すとこんな感じ
Control Control
コントロール
テンプレート
スタイル
Data Data
データ
テンプレート
13年3月9日土曜日

39. DataTemplateの活用先
DataTemplateはデータの系列をホストする
ItemsControl系に必須の機能
ListBoxとか。
Tabとか。
13年3月9日土曜日

40. DataTemplateでできること
DataTemplateを切り替えることで、同じデータソー
スに対して違うビューを表現
データの型ごとに異なる挙動をさせることも可能
ちょっとだけご紹介。
13年3月9日土曜日

41. DataBindingの何がすごいのか
ビューとロジックを切り分ける、というのはもはや
大規模アプリでは必須の設計
その際になんらかの中間層を設けるのも常道
ビューと中間層の同期は更新が多いので、どんなパ
ターンでも面倒くさい所になる。
その解決の一つがDataBinding
ロジック
ビュー
中間層
13年3月9日土曜日

42. DataBindingの何がすごいのか
ビューとロジックを切り分ける、というのはもはや
大規模アプリでは必須の設計
その際になんらかの中間層を設けるのも常道
ビューと中間層の同期は更新が多いので、どんなパ
ターンでも面倒くさい所になる。
その解決の一つがDataBinding
ロジック
ビュー
中間層
Bi
nd
in
g
!
13年3月9日土曜日

43. そしてMVVMへ
MVVM：
Model ：ロジック
View ：ビュー
ViewModel：中間層
WPF設計パターンの王道
色々と準備が面倒くさいのでライブラリを用いるのが普
通。
Livet ←オススメ
MVVM Light Toolkit
Caliburn Micro
13年3月9日土曜日

44. まとめ
そろそろ時間切れ？
13年3月9日土曜日

45. WPF使おう。
モダンなUIを作りたいと思ったらもう選択肢はな
い。
そんなに描画にこらないとしても、データバインデ
ィングなどの設計的メリットは大きい。
XAMLファミリーは増えてきているので、もはやこっ
ちが汎用性は上。
13年3月9日土曜日

46. For More Information...
一般情報
いわながさん（@ufcppさん）の連載
http://www.atmarkit.co.jp/ait/subtop/
features/da/ap_introwpf_index.html
かずきさん（@okazukiさん）のBlog
http://d.hatena.ne.jp/okazuki/searchdiary?
word=%2A%5BWPF%5D
MVVMとか設計パターンに関して。
おのうえさん（@ugaya40さん。Livetの作者）
http://ugaya40.net/
13年3月9日土曜日

47. 本がない(´・ω・｀)
これがまだしも。（英語だけど読みやすい）
3.5 〜 4.5まで全部持ってる。
見たい人はみせますよー。
13年3月9日土曜日