わんくま同盟 大阪勉強会 #37 にて、Windows Mobile 6.xでグラデーションのかかったボタンを作る方法についてお話をさせて頂きました。

1. Windows phoneで作る
グラデーションボタン
CH３COOH(酢酸)

2. 自己紹介
 CH3COOH（酢酸）
 大阪で働くIT系サラリーマン
 2008年に芋星(S１１HT)を購入しました。
 普通にケータイで見ることの出来ていた
Webサイトが見れなくなったのがショックで、
専用のビューア作ったり、作ってもらったりと、
Windows Phoneをいじり続けていました。
 wikiやブログにTipsを書いたり、
ビューアを書いて公開していたところ、、、

3. MS-MVPを受賞しました！
 7月1日にDevice Application Developmentの
コンピテンシでMVPを受賞したというメールが届きました。
 どうみてもMVPです。本当にありがとうございました。

4. 突然ですが、ボタンです。

5. Windows Mobile 6.5の
標準ボタンを見た事がありますか

6. iPhone/Androidのボタン

7. うらやましい
 角丸でグラデーションの掛かったボタンって
かっこいいですね
 Windows Mobile 6.5のボタンはシンプルですね
 グラデーションボタンが欲しいですね
作ってみましょう！

8. Windows phoneで
グラデーションを使ってみる

9. マネージコードからはP/Iでグラデ
 GradientFill関数を使うとグラデーションが描けます。
 マネージコードな方は、いつも通りP/Invokeしてください

10. 任意の形でグラデーション
を描画する

11. マスク的なイメージを作る
 .NET Compact Frameworkには、GradientBrushとか便利
なものはありません。マスク的なイメージを作ります。

12. マスク的なイメージを使ってみる
 緑色の円形を透過させて、元のグラデーションイメージに
上書きします

13. 任意の形のグラデーションイメージ
 これで任意の図形のグラデーションが出来ました。

14. あとは描画するだけ
 あとは、マゼンタの部分を透過させて
好きな場所に描画させましょう！

15. Windows Mobileで
角丸でグラデーションの掛かった
パッと見た感じiPhoneかな？と
思わせるようなボタンを作ってみる

16. 作ってみた
 Windows Messageをフックするクラスを使って、サブク
ラス化したコントロールで適切に描画処理を呼ぶだけ。

17. 続きはネットで
 詳しいコードは、ここに載っているみたいです
（原稿が進んでいなくて申し訳ありません・・・）
 http://gihyo.jp/dev/serial/01/windows-phone/0014
 http://gihyo.jp/dev/serial/01/windows-phone/0015
 http://gihyo.jp/dev/serial/01/windows-phone/0016(予定)
 http://gihyo.jp/dev/serial/01/windows-phone/0017 (予定)

18. まとめ

19. まとめ
 Windows phoneの世界では
みんながアプリごとにボタンを独自実装してます
 本当はプラットフォームとして統一してくれるのが、
ユーザーにとっても開発者にとっても幸せなんだけど・・・
 ボタンをサブクラス化して、Windows Messageを拾って、
P/Iした関数呼ぶだけ。ちょうかんたんにイマドキのス
マートフォンっぽいグラデーションボタンを作れるよ。


20. ちなみに
 Windows Phone 7のデフォルトなボタンは
今よりもっとシンプルなんだよね・・・

21. ご清聴有難うございました