WPFことはじめ

6,961 views

Published on

@ VisualStudio勉強会 #1

0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,961
On SlideShare
0
From Embeds
0
Number of Embeds
240
Actions
Shares
0
Downloads
58
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

WPFことはじめ

  1. 1. WPF 入門 (ことはじめ) @Posaune13年3月9日土曜日
  2. 2. じこしょーかい まえかわ ひろし a.k.a @Posaune やってること 京都アジャイル勉強会 #京アジャ TABOK勉強会 Blogやってるよ! → http://posaune.hatenablog.com/13年3月9日土曜日
  3. 3. すきなもの .NET言語 C#, F#, XAML系テクノロジ Emacs歴半年くらい。 ReSharper無しで生きていけない。 TDD アジャイル開発的なあれこれ 自動化(Jenkinsさん) UX, HCD(UCD) Business Model Generation13年3月9日土曜日
  4. 4. さて、本題いきまーす。 3分くらい?13年3月9日土曜日
  5. 5. WPFとは。13年3月9日土曜日
  6. 6. Windows Presentation Foundation Windows用のプレゼンテーション層向けのフレームワー ク。 Microsoft公式。 描画エンジンがGDIベースからDirectXベースに置き換わ り、いろいろパワーアップ。 主な採用アプリ: Visual StudioなどのMS系ツール Github for Windows Sharp Develop 50分でとても伝えきれる量ではないので、今日はまず、 ほんのさわり。13年3月9日土曜日
  7. 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. 8. いつやるか?13年3月9日土曜日
  9. 9. いつやるか?13年3月9日土曜日
  10. 10. まずはVS上でご紹介 ここまで5分くらい?13年3月9日土曜日
  11. 11. 柔軟なUIレイアウト Windows Formでよくあること ボタンの中に画像と文字を・・・ コンボボックス内に画像も・・・ タブに閉じるボタンを・・・ こんにちわオーナードロー。 ではWPFは?13年3月9日土曜日
  12. 12. デモ① コントロールが こんなところに。13年3月9日土曜日
  13. 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. 14. UI描画はいじり放題 再びWindow Formでよくあること スクロールバーの色変えたい Macみたいなスライダーがいいよ― ボタンももっとMacっぽく・・・ むりなのー?じゃあせめてメトロっぽく! こんにちわオーナードロー ではWPFは?13年3月9日土曜日
  15. 15. デモ②: GDIとは違うのだよ、GDIとは。13年3月9日土曜日
  16. 16. これがWPFの威力です(ドヤァ コントロールの描画はほぼ完全にカスタマイズ可能 ボタンだろうがコンボボックスだろうかスクロー ルバーだろうが。 WPFは、UIの描画部分をStyleとTemplateという仕 組みでカスタマイズ!コレ覚えて帰ってね。 ベクターベースの描画なので、拡大しても くずれない! 拡大・縮小・回転などがプロパティになってる13年3月9日土曜日
  17. 17. StyleとTemplate Style: プロパティの変更セットをリソースとして保持す る仕組み Template: コントロールがどう描画されるか、というUI構造 のテンプレートを保持する。 実行時には展開されてる。 プロパティの一つ。(だからStyleで一緒に管理 することが多い)13年3月9日土曜日
  18. 18. デモ:中身を覗き見して みましょう13年3月9日土曜日
  19. 19. ちょっと脇道:SNOOP WPF開発での必須ツール。 WPFの描画結果を返してくれる。いわゆるUISpyツー ル。 他にもEvent監視とかプロパティの表示とか諸々や ってくれる。 所謂神ツール。 http://snoopwpf.codeplex.com/13年3月9日土曜日
  20. 20. 真打ち登場: Blend!Blend! そろそろ20分くらい?13年3月9日土曜日
  21. 21. Blend XAML系プラットフォーム用のデザインツール 一時期はコレなしのWPFは一種の苦行だった 最近は大分まし。 Adobe Illustrator的な機能が一部追加されたVisual Studioと思っていただければ。 Visual Studio 2012 Update 2でVS2012にバンドルさ れる予定。 Expressでも使えるようになる!? 。。。わけではないっぽい13年3月9日土曜日
  22. 22. Blendでできること UIは作りやすいインターフェースになっている 組込の図形がかなり豊富になっていたり カラーパネルが使いやすかったり Pathツールも充実していたり まぁみてみて。13年3月9日土曜日
  23. 23. 良くあるデモ 反射テキストボックスを作ってみます。 ココらへんを使う 要素の回転・反転 Visual Brush UI要素をそのままBrushとして用いる13年3月9日土曜日
  24. 24. Blendで作るアニメーション アニメーションは非常に簡単に作れる。 ストーリーボードを開いて、 変化させたいプロパティをペタペタ変更 変化の度合いもカスタマイズできる。 アニメーションの再生にはイベントやトリガー、ビ ヘイビアを用いる まぁやってみましょう。13年3月9日土曜日
  25. 25. 状態に合わせて色々変える コントロールの状態に合わせた挙動を作成できる。 コントロールに紐づくのでテンプレートの編集か ら! Visual State Manager(VSM)が使いやすい やるよー。13年3月9日土曜日
  26. 26. エフェクト当てよう エフェクト: 描画の最終段階でかけられるフィルタのようなも の。 画像編集ツールとかについてるあれみたいなもの だと思ってもらえれば。 Blend組込のもので結構遊べる サクッと見てみよう。13年3月9日土曜日
  27. 27. ちょっと脇道: Shazzam XAMLで使うEffect用の言語“HLSL”のエディタ。 HLSL:High Level Shader Language DirectXのシェーダに使うのが本来の用途 直ぐに結果が確認できるばかりか、コンパイルして 呼び出し用のコード生成までしてくれる。 割と神。 http://shazzam-tool.com/ こんなんです。13年3月9日土曜日
  28. 28. Behavior コントロールに色々な動きを付加する仕組み ボタン押したら何かしたり マウスで移動できるようにしたり カスタム化も結構簡単。 http://code.msdn.microsoft.com/Behavior- beae13a6 組込のをさらっと紹介するよ―。13年3月9日土曜日
  29. 29. AIファイルのインポート Adobe Illustlatorファイルをインポートできる もち、ベクター形式で。 ネットにおちてるAIファイルを読ませてみたよ。13年3月9日土曜日
  30. 30. 使わないともったいない データバインディング 40分くらいたった?13年3月9日土曜日
  31. 31. データバインディング データ同士を結びつける(バインドする)仕組み。 あるプロパティとあるプロパティをバインドさせる と、その2つは同期して変わる、的な。 まずは簡単な例から。13年3月9日土曜日
  32. 32. DEMO: UI要素同士のバインディング13年3月9日土曜日
  33. 33. DataContextとのバインディング DataContext?? 全てのWPFコントロールが持つプロパティ DataContextに設定されたオブジェクトとも、デ ータバインドすることが可能。 特に指定しないと、親のDataContextをこどもが 引き継ぐ。 例えばこんなふうに書けます。13年3月9日土曜日
  34. 34. バインドされるデータは工夫が必要 INotifyPropertyChangedの実装は必須 なかなか面倒くさいので色んなサポートライブラリ がある。 たとえば、Resharperを入れておくと・・・ WPFのためのアプリケーションフレームワークを使 えば結構楽になる。13年3月9日土曜日
  35. 35. あれ?メソッドは? ICommandインタフェースを実装することで、メソッ ドも(間接的に)呼べます。 CallMethodActionでメソッドを直接呼ぶことも可 能。 データバインドをうまく使えばUI側はXAMLのみで書 けるようになる 面倒くさいことを全てフレームワークに押し付け られる13年3月9日土曜日
  36. 36. データバインドのもう一歩先 ただ単にデータを貼り付けるだけがバインディング じゃあありません。 バインドされたデータをどう表現するか、はXAMLの お仕事! DataTemplateを使って、データを元にUIを作り出し ます。13年3月9日土曜日
  37. 37. DEMO: これがDataTemplate!13年3月9日土曜日
  38. 38. 対応を示すとこんな感じ Control Control コントロール テンプレート スタイル Data Data データ テンプレート13年3月9日土曜日
  39. 39. DataTemplateの活用先 DataTemplateはデータの系列をホストする ItemsControl系に必須の機能 ListBoxとか。 Tabとか。13年3月9日土曜日
  40. 40. DataTemplateでできること DataTemplateを切り替えることで、同じデータソー スに対して違うビューを表現 データの型ごとに異なる挙動をさせることも可能 ちょっとだけご紹介。13年3月9日土曜日
  41. 41. DataBindingの何がすごいのか ビューとロジックを切り分ける、というのはもはや 大規模アプリでは必須の設計 その際になんらかの中間層を設けるのも常道 ビューと中間層の同期は更新が多いので、どんなパ ターンでも面倒くさい所になる。 その解決の一つがDataBinding ロジック ビュー 中間層13年3月9日土曜日
  42. 42. DataBindingの何がすごいのか ビューとロジックを切り分ける、というのはもはや 大規模アプリでは必須の設計 その際になんらかの中間層を設けるのも常道 ビューと中間層の同期は更新が多いので、どんなパ ターンでも面倒くさい所になる。 その解決の一つがDataBinding ロジック ビュー 中間層 Bi nd in g !13年3月9日土曜日
  43. 43. そしてMVVMへ MVVM: Model :ロジック View :ビュー ViewModel:中間層 WPF設計パターンの王道 色々と準備が面倒くさいのでライブラリを用いるのが普 通。 Livet ←オススメ MVVM Light Toolkit Caliburn Micro13年3月9日土曜日
  44. 44. まとめ そろそろ時間切れ?13年3月9日土曜日
  45. 45. WPF使おう。 モダンなUIを作りたいと思ったらもう選択肢はな い。 そんなに描画にこらないとしても、データバインデ ィングなどの設計的メリットは大きい。 XAMLファミリーは増えてきているので、もはやこっ ちが汎用性は上。13年3月9日土曜日
  46. 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. 47. 本がない(´・ω・`) これがまだしも。(英語だけど読みやすい) 3.5 〜 4.5まで全部持ってる。 見たい人はみせますよー。13年3月9日土曜日

×