usay.Text Blog

目次

Blog 利用状況

書庫

12月22日勉強会お疲れ様でした。「Snoopを使いWPFを理解しよう」

手助けしてくれた皆さん。発表を聞いてくださって皆さん。本当にありがとうございました。

技術系の発表ははじめてということもあり、かなり勉強になりました。

発表の目的は「WPFで作るならSnoop」というのを覚えてもらえれば成功と設定したので、
まぁまぁ成功だったのではないでしょうか。

工夫した点として、

・カンニングペーパーを作った。
・リハーサルを行ってみた。
・時間を計測してみた。
・声が小さいと言われることが多いので発声法の練習をしておいた。
の4点です。
#笑いを多く入れる努力は行っていませんヽ(´ー`)ノ

特に時間計測とリハーサルは、いつかの勉強会でRさんが行っているようにみえたので、ぜひやらなければいけないと思い実行しました。
ただ、中さんはまったくリハーサルはしていないようです。すごい。^^;
発声法は「アメンボ赤いなあいうえお」だけ一日2回ぐらいやっただけです。

参考になるか分かりませんがカンニングペーパーを吐き出しておきます。
pptやvideoが公開されたら合わせてみると理解が深まるかもしれません。

以下カンニングペーパー。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

では時間になりましたのではじめさせていただきたいと思います。

今日はsnoopを使いWPFを理解しましょうというタイトルで
30分お時間をいただいています。


まず私usayについてですが、
WPFを用い、いち早く業務アプリケーション開発を行っております。
WPFがRTMになった1年前から開発をスタートしたので、
もう1年が経過しております。

今日はその開発の中で一番役に立ったSnoopというツールを紹介します。
(えーVisualStudioとかを除いて一番役に立った)
WPFの技術についてふれていただきたいと思います。


アジェンダの説明をします。

> ・Snoop(WPF向け)とは?

まずSnoopというツールは何かという説明をします。

そのあとにざっと操作の説明をします。
> ・ざっと操作の説明。

えーそのあとに
> ・依存プロパティ(Dependency Property)とは
依存プロパティとデータバインディングについて説明をしたいと思っています。

> ・データバインディングとは?
> ・まとめ


ーーーーー1分

> ・Snoop(WPF向け)とは?

> ・パケットスニファではありません。

SolarisなどのOSで付属している同名のツールとは別物です。

その正体は、
> ・WPFアプリケーションのデバッグ用ツール。

何ができるのかというと、
> ・Spy++のようにメッセージ(event)を見ることができ、それに加えて、PropertyGridのように、プロパティの確認および、直接編集が行えるツールです。

PropertyGridとはあまり知られてはいないかもしれませんがSystem.Windows.Formsにあるコンポーネントの一つです。
このコンポーネントに対して、対象となるクラスのインスタンスを指定することによって
VisualStudioのプロパティの画面と同様に
プロパティの確認および編集が行えます。
x PropertyGridの内部的にはReflectionを多用していると思われますが、
Snoopでも同じようなことが行えます。

> WPFで開発をするなら必須ツール。いますぐQuickLaunchに放り込むかショートカットを設定してください

私はQuickLaunchに設定しています。起動するときの合言葉も決めています。かもんすぬーぷ!☆といってMouseをクリックして起動しています。


ーー
> ・作者はpete blois氏。http://www.blois.us/blog/
ぺいと?

> ・Expression toolsの開発メンバー

> ・一応Snoopのツール自体はunofficial toolです。

これが重要ですが、
> ・Snoop自身もWPFで書かれていて、ソースコードが公開されています。ぜひ改造して使いましょう。 http://www.blois.us/Snoop/
改造しなくても使えます。

ーーーーー2分

> ・ざっと操作の説明。

まずデバッグ対象となるアプリケーションを起動しておきます。
今回のサンプルはDataBindingLab.exeというWindows SDKに含まれているサンプルです。

Snoopを起動します。
アプリケーションのタイトルを選択してSnoopボタンを押します。
そうするとSnoopのメイン画面が起動します。
 この画面ですね。
こちらのMagnifyボタンについては説明しません。なぜならば役に立たないからです。

メイン画面を起動したあとに
Ctrl+Shiftキーを押しながらMouseOverすることにより、対象となるインスタンスをハイライトすることができます。
もしくはTextBlockについて調べたいのであれば、左上のここにクラス名を入力します。
Nameプロパティが設定されていれば、それを元にフィルタリングも可能です。


VisualTreeとよぶんですが、
WPFの場合、
テーマやStyleの適用場所がたくさんあり、さらにトリガやテンプレートやデータバインディングによって刻々とVisualTreeが更新されます。

なのでこの画面があると、非常に楽です。

ーーーーーー2分。

次にPropertiesのタブです。
調査したいインスタンスを指定することで、
そのインスタンスのプロパティをみることができます。

ValueSourceがUnknonwとなっているものが通常のプロパティ。
それ以外が後ほど説明しますが依存プロパティです。

このPropertiesのタブも左のTreeViewと同じようにフィルタリングすることができます。
#Backgroundと入力

そして、この画面で、プロパティの確認と編集が行えます。

ためしにBackgroundの変更を行ってみます。
Red
Yellow
Blue

Whiteに戻す。

これによってこのプロパティの動作がわからない
この画面で気軽に試行錯誤することが可能です。


あまり使ったことがないですが、breakpointも設定ができます。

ーーー2分

次にEventのタブです。

ご覧のとおりイベントをキャプチャすることが可能です。

いまこのsnoopはちょっとだけ改造して
上のチェックボックスがすべてついてしまっていますが、
通常は最低限のEventにチェックがついています。

このタブはあまり高度なことが行えませんが、
最低限どういったイベントがあるかとか、
どのインスタンスがイベントを止めているかといった確認がおこなえます。

もっと詳細なイベントの確認はWindows SDKに含まれるWPFPerf.exeを使用しましょう。

ーーー1分
これで今日話したいことはだいたい終了しましたが、これだけだと時間があまってしまうので、


次に、依存プロパティ( Dependency Property)とは?

について説明しようと思います。


> プロパティをWPF内部で管理したもの。
> いままでのプロパティをCLRプロパティと呼んで区別をしたりします。

この呼び方は覚えなくていいです。

> 何ができるのか?……リソース、データバインディング、スタイル、アニメーション、メタデータのオーバーライド、プロパティ値の継承、WPFデザイナの統合。

何が強力になったのか。
リソースの指定が気楽に行えます。
x StaticResource、DynamicResourceというふたつの指定方法があります。
x DynamicResourceという指定方法でリソースを指定すると、リソースを変更した段階で、即座に反映されます。
データバインディング。これについては後で説明します。
スタイル。コントロールの外見ですね。それに加えて、トリガという機能がありまして、
DPはトリガの対象とトリガになることができます。たとえばMouseOver
アニメーション。
WPFのアニメーションはどうやっているかというと、依存プロパティの値を変更しているだけです。
すごい簡単に説明しました。内部ではすごく複雑です。

> プロパティ値の継承
これはのちほどデモで説明しようと思います。

> メタデータのオーバーライド、、WPFデザイナの統合。
このへんは難しいので説明しません。


> 特定の状況下でのみ使用する依存プロパティがあっても値を設定しなければ、メモリ使用量が少ない。

これを少しsnoopでみてみましょう。
# DataBindingLab.exe。ここでValueSourceがDefaultとなっているものと、プロパティタブの□ボタンを押したときの動作の説明。

調べ方が正しいかどうかはあやしいので
印刷した資料にはありませんが、
左がWindows.Formsで、右がWPFのコントロールです。
サイズが減っているものもあり、サイズが増えているものもあります。

> 依存プロパティの特殊な形、添付プロパティ(アタッチドプロパティ)
正確には違うんですが、

> あるクラスが他のクラスに対して、プロパティを設定できる。A(使用するクラス)→B(使用されるクラス)の場合にのみに使用するプロパティ、Bにプロパティを実装しなくてよい。

具体例として一番使われているのがレイアウト情報ですね。
Windows.Formsでは、Panelがあってその中にButtonがあったときに、Buttonのクラス定義としてプロパティを作成し、xyの情報などを設定しました。
WPFではPanelのクラス定義としてアタッチドプロパティを作成し、Buttonにインスタンスに対して、設定することが可能です。

つまり、何を言いたいかと言うと、Buttonクラス定義が非常にシンプルになります。

ーーーーー5分

デモです。

二つデモを行いたいと思います。


ControlAnimationGallery.exe 「^」ボタンの説明。

Snoopはコントロールだけではなくプロパティに設定されたインスタンスの中を見ることができます。

ーーーーー1分

Demo3-http://msdn2.microsoft.com/ja-jp/library/ms743230(VS.80).aspxのソースコードみやすいように改造。

もうひとつ地味なデモを。
x デモといいながらソースコードですね。
このソースコードで、どのBackgroundが指定されるかわかりますか?

誰かに指定。

依存プロパティでしっておくと、はまることがすくないこととして、
依存プロパティの優先順位があります。

これについて詳しくは説明しませんが、
Defaultが一番弱く。
Themeがその次。 
 ThemeTrigger
Styleその次。
 StyleTrigger
Localが一番強い。DataBinding。
x 正確にはこの上にAnimationとCoerce(こわーす)というのがあります。

これをきちんと把握することによって、望みのUIが作成が可能です。

ーーー4分。

データバインディングについて。

> MVCアーキテクチャのビューとモデルの接合点
> バインディングターゲット(ビュー)は依存プロパティのみ。

xすごい簡単に説明すると、
xDataContextに指定したインスタンスのプロパティに
x{Binding Path=hogehoge}という構文でアクセスします。
x#もちろん別の指定の仕方もあります。

ようは、データを画面上に簡単に表示するための手段(決まり事)です。
この機能(データバインディング)を使うとコード量も少なくなるし、実装スピードも速くなる。
ただ、複雑なことをしようとすると、わけがわからなくなります。

> バインディングソース(モデル)がバインディングターゲット(ビュー)になぜか反映できないことがよく起こる。その場合にSnoopが利用できる。

#FrameworkElement.DataContext

どこが邪魔をしてきちんとバインディングができていないかが視覚的にみることができます。
VisualStudioのDebugWindowにも表示されるのですが、それだけの情報だと、解決にとても時間がかかります。


ーーー1分。

デモ:DataBindingLab.exeで例外でるようにすこしだけ改悪したもの。

まず例外がVisualStudioのDebug画面で表示されたとします。
かもーんすぬーぷ。

左上のVisuals with binding Errorsという秘密のコマンドを入力すると、

BindingError。赤いラベルを表示させてみる。
どこのインスタンスが例外が発生しているかがわかればもう解決したも同然です。

Delve Binding
Delve BindingExpressionの違い。

これとVisualTreeを見比べることで
だいたい解決します。

ーーー2分。

WPF3.5限定ですが、
diag:PresentationTraceSources.TraceLevel="high"
という添付プロパティを使用することで、さらに詳細な情報をみることができます。

デモ:
ValueSouce:Inherit。プロパティ値の継承。通常は継承しないですが、そういう依存プロパティの定義方法があります。
DataContextについて

ーーー4分

まとめ:

> 今日はSnoopの使い方について説明しました。
 中途半端な知識でもsnoopを使えば何とかなります。
> 依存プロパティについて説明しました。
 特定の依存関係をもつことによって、手軽に強力な機能を実現できるプロパティ。
 Microsoftはとてもいい名前をつけたと思います。
 x これを理解することによってカスタムコントロールが作り放題です。
> データバインディングで例外が発生したときの対処法について説明しました。

ーーー1分

投稿日時 : 2007年12月26日 16:33

コメントを追加

# re: 12月22日勉強会お疲れ様でした。「Snoopを使いWPFを理解しよう」 2007/12/26 22:43 JZ5

カンペまで! Snoopメモメモ……。

# re: 12月22日勉強会お疲れ様でした。「Snoopを使いWPFを理解しよう」 2007/12/27 10:45 Streetw☆

カンペ片手にビデオの公開を楽しみにしてます。
#起動の合い言葉のところもw
お疲れ様でした~

タイトル
名前
URL
コメント