WPF 入門(ことはじめ)

@Posaune

13年3月9日土曜日

じこしょーかいまえかわ ひろし

a.k.a ＠Posaune

やってること

京都アジャイル勉強会 #京アジャ

TABOK勉強会

Blogやってるよ！ →

http://posaune.hatenablog.com/

13年3月9日土曜日

すきなもの

.NET言語

C#, F#, XAML系テクノロジ

Emacs歴半年くらい。

ReSharper無しで生きていけない。

TDD

アジャイル開発的なあれこれ

自動化（Jenkinsさん）

UX, HCD（UCD）

Business Model Generation

13年3月9日土曜日

さて、本題いきまーす。

3分くらい？

13年3月9日土曜日

WPFとは。

13年3月9日土曜日

Windows Presentation Foundation

Windows用のプレゼンテーション層向けのフレームワーク。

Microsoft公式。

描画エンジンがGDIベースからDirectXベースに置き換わり、いろいろパワーアップ。

主な採用アプリ：

Visual StudioなどのMS系ツール

Github for Windows

Sharp Develop

50分でとても伝えきれる量ではないので、今日はまず、ほんのさわり。

13年3月9日土曜日

よくいわれる表現「WPFはMicrosoftの 新の描画技術で・・・」

誕生は2006年ですよお客さん。

3.0 → 3.5 → 4.0 → 4.5（Now！）

安定どころかそろそろ枯れてきた気配すら。

同系統の弟妹も沢山（Silverlight, Windows Phone, Win8 ...）

（不憫な子が多いとか言うな）

VS 2012 SP2ではこれまで5万くらいしてた開発環境が同梱される気配・・・

13年3月9日土曜日

いつやるか？

13年3月9日土曜日

いつやるか？

13年3月9日土曜日

まずはVS上でご紹介

ここまで5分くらい？

13年3月9日土曜日

柔軟なUIレイアウトWindows Formでよくあること

ボタンの中に画像と文字を・・・

コンボボックス内に画像も・・・

タブに閉じるボタンを・・・

こんにちわオーナードロー。

ではWPFは？

13年3月9日土曜日

デモ① コントロールがこんなところに。

13年3月9日土曜日

階層化されたUI構造ボタンの中に入るのは文字でなく、別のUIオブジェクト。

ほとんどのUIオブジェクトは別のUIオブジェクトを格納可能。

必然的に再帰的な階層構造を持つ。

伊達や酔狂でXMLにUI書いてる訳ではないのです。

あ、これをXAMLといいます。

<Button> <Grid> <TextBlock><Run Text="Click Me!"/></TextBlock> <Image Source="testImage.jpeg" Stretch="Fill"/> </Grid></Button>

13年3月9日土曜日

UI描画はいじり放題再びWindow Formでよくあること

スクロールバーの色変えたい

Macみたいなスライダーがいいよ―

ボタンももっとMacっぽく・・・

むりなのー？じゃあせめてメトロっぽく！

こんにちわオーナードロー

ではWPFは？

13年3月9日土曜日

デモ②：GDIとは違うのだよ、GDIとは。

13年3月9日土曜日

これがWPFの威力です（ﾄﾞﾔｧコントロールの描画はほぼ完全にカスタマイズ可能

ボタンだろうがコンボボックスだろうかスクロールバーだろうが。

WPFは、UIの描画部分をStyleとTemplateという仕組みでカスタマイズ！コレ覚えて帰ってね。

ベクターベースの描画なので、拡大しても

くずれない！

拡大・縮小・回転などがプロパティになってる

13年3月9日土曜日

StyleとTemplateStyle：

プロパティの変更セットをリソースとして保持する仕組み

Template：

コントロールがどう描画されるか、というUI構造のテンプレートを保持する。

実行時には展開されてる。

プロパティの一つ。（だからStyleで一緒に管理することが多い）

13年3月9日土曜日

デモ：中身を覗き見してみましょう

13年3月9日土曜日

ちょっと脇道：SNOOPWPF開発での必須ツール。

WPFの描画結果を返してくれる。いわゆるUISpyツール。

他にもEvent監視とかプロパティの表示とか諸々やってくれる。

所謂神ツール。

http://snoopwpf.codeplex.com/

13年3月9日土曜日

真打ち登場：Blend！Blend！

そろそろ20分くらい？

13年3月9日土曜日

BlendXAML系プラットフォーム用のデザインツール

一時期はコレなしのWPFは一種の苦行だった

近は大分まし。

Adobe Illustrator的な機能が一部追加されたVisual Studioと思っていただければ。

Visual Studio 2012 Update 2でVS2012にバンドルされる予定。

Expressでも使えるようになる！？

。。。わけではないっぽい

13年3月9日土曜日

BlendでできることUIは作りやすいインターフェースになっている

組込の図形がかなり豊富になっていたり

カラーパネルが使いやすかったり

Pathツールも充実していたり

まぁみてみて。

13年3月9日土曜日

良くあるデモ反射テキストボックスを作ってみます。

ココらへんを使う

要素の回転・反転

Visual Brush

UI要素をそのままBrushとして用いる

13年3月9日土曜日

Blendで作るアニメーションアニメーションは非常に簡単に作れる。

ストーリーボードを開いて、

変化させたいプロパティをペタペタ変更

変化の度合いもカスタマイズできる。

アニメーションの再生にはイベントやトリガー、ビヘイビアを用いる

まぁやってみましょう。

13年3月9日土曜日

状態に合わせて色々変えるコントロールの状態に合わせた挙動を作成できる。

コントロールに紐づくのでテンプレートの編集から！

Visual State Manager（VSM）が使いやすい

やるよー。

13年3月9日土曜日

エフェクト当てようエフェクト：

描画の 終段階でかけられるフィルタのようなもの。

画像編集ツールとかについてるあれみたいなものだと思ってもらえれば。

Blend組込のもので結構遊べる

サクッと見てみよう。

13年3月9日土曜日

ちょっと脇道： ShazzamXAMLで使うEffect用の言語“HLSL”のエディタ。

HLSL：High Level Shader Language

DirectXのシェーダに使うのが本来の用途

直ぐに結果が確認できるばかりか、コンパイルして呼び出し用のコード生成までしてくれる。

割と神。

http://shazzam-tool.com/

こんなんです。

13年3月9日土曜日

Behaviorコントロールに色々な動きを付加する仕組み

ボタン押したら何かしたり

マウスで移動できるようにしたり

カスタム化も結構簡単。

http://code.msdn.microsoft.com/Behavior-beae13a6

組込のをさらっと紹介するよ―。

13年3月9日土曜日

AIファイルのインポートAdobe Illustlatorファイルをインポートできる

もち、ベクター形式で。

ネットにおちてるAIファイルを読ませてみたよ。

13年3月9日土曜日

使わないともったいないデータバインディング

40分くらいたった？

13年3月9日土曜日

データバインディングデータ同士を結びつける（バインドする）仕組み。

あるプロパティとあるプロパティをバインドさせると、その2つは同期して変わる、的な。

まずは簡単な例から。

13年3月9日土曜日

DEMO：UI要素同士のバインディング

13年3月9日土曜日

DataContextとのバインディング

DataContext？？

全てのWPFコントロールが持つプロパティ

DataContextに設定されたオブジェクトとも、データバインドすることが可能。

特に指定しないと、親のDataContextをこどもが引き継ぐ。

例えばこんなふうに書けます。

13年3月9日土曜日

バインドされるデータは工夫が必要

INotifyPropertyChangedの実装は必須

なかなか面倒くさいので色んなサポートライブラリがある。

たとえば、Resharperを入れておくと・・・

WPFのためのアプリケーションフレームワークを使えば結構楽になる。

13年3月9日土曜日

あれ？メソッドは？ICommandインタフェースを実装することで、メソッドも（間接的に）呼べます。

CallMethodActionでメソッドを直接呼ぶことも可能。

データバインドをうまく使えばUI側はXAMLのみで書けるようになる

面倒くさいことを全てフレームワークに押し付けられる

13年3月9日土曜日

データバインドのもう一歩先ただ単にデータを貼り付けるだけがバインディングじゃあありません。

バインドされたデータをどう表現するか、はXAMLのお仕事！

DataTemplateを使って、データを元にUIを作り出します。

13年3月9日土曜日

DEMO：これがDataTemplate！

13年3月9日土曜日

対応を示すとこんな感じ

Control

スタイル

コントロールテンプレート

Control

Data Dataデータ

テンプレート13年3月9日土曜日

DataTemplateの活用先DataTemplateはデータの系列をホストするItemsControl系に必須の機能

ListBoxとか。

Tabとか。

13年3月9日土曜日

DataTemplateでできることDataTemplateを切り替えることで、同じデータソースに対して違うビューを表現

データの型ごとに異なる挙動をさせることも可能

ちょっとだけご紹介。

13年3月9日土曜日

DataBindingの何がすごいのか

ビューとロジックを切り分ける、というのはもはや大規模アプリでは必須の設計

その際になんらかの中間層を設けるのも常道

ビューと中間層の同期は更新が多いので、どんなパターンでも面倒くさい所になる。

その解決の一つがDataBinding

ビュー

ロジック

中間層

13年3月9日土曜日

DataBindingの何がすごいのか

ビューとロジックを切り分ける、というのはもはや大規模アプリでは必須の設計

その際になんらかの中間層を設けるのも常道

ビューと中間層の同期は更新が多いので、どんなパターンでも面倒くさい所になる。

その解決の一つがDataBinding

ビュー

ロジック

中間層

Binding !

13年3月9日土曜日

そしてMVVMへMVVM：

Model ：ロジック

View ：ビュー

ViewModel：中間層

WPF設計パターンの王道

色々と準備が面倒くさいのでライブラリを用いるのが普通。

Livet

MVVM Light Toolkit

Caliburn Micro

←オススメ

13年3月9日土曜日

まとめ

そろそろ時間切れ？

13年3月9日土曜日

WPF使おう。モダンなUIを作りたいと思ったらもう選択肢はない。

そんなに描画にこらないとしても、データバインディングなどの設計的メリットは大きい。

XAMLファミリーは増えてきているので、もはやこっちが汎用性は上。

13年3月9日土曜日

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日土曜日

本がない(´・ω・｀)これがまだしも。（英語だけど読みやすい）

3.5 〜 4.5まで全部持ってる。

見たい人はみせますよー。

13年3月9日土曜日