スマートフォン勉強会＠関西#10 にて、Windows Mobile 6.xでグラデーションのかかったボタンを作る方法についてお話をさせて頂きました。

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

2. 自己紹介
 CH3COOH（酢酸）
 大阪で働くIT系サラリーマン
 芋星(S１１HT)を購入した後から、
中でも、ケータイで見ることの出来ていた
Webサイトが見れなくなったのがショックで、
Windows Phoneをいじり続けていました。

3. MS-MVPを受賞しました！
 7月1日にMVPの発表日で連絡が来ず、
自分の中では諦めていました。。。
 日をまたぐか、またがないかの時間帯に
Device Application Developmentのコンピテンシで
MVPを受賞したというメールが届きました。
 どうみてもMVPです。本当にありがとうございました。

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

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

6. iPhone/Androidのボタン

7. うらやましい
 角丸でグラデーションの掛かったボタンって
かっこいいですね。
 Windows Phone 7では数秒で作成出来ますが、
Windows Mobile 6.5では無理です。
 グラデーションボタンが欲しいですね。
作ってみましょう！

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

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

10. 続きはネットで
 詳しいコードは、ここに載っているみたいです
 http://gihyo.jp/dev/serial/01/windows-phone/0014

11. Windows Mobileで
任意の形でグラデーションを切抜く

12. マスク的なイメージを使ってみる
 切り抜き用に画像を用意します。緑色の部分を投下させ
て、元のグラデーションイメージと貼り合せます。

13. 任意の形にグラデーションを
適応する
 あとは、マゼンタの部分をキーカラーにしてクリッピングし
ます。

14. 続きはネットで
 詳しいコードは、ここに載っているみたいです
 http://gihyo.jp/dev/serial/01/windows-phone/0015

15. Windows Mobileで
角丸でグラデーションの掛かった
ボタンを作ってみる

16. 作ってみた
 あとは、テカりの部分に一段明るい線を引いたり、陰に
なるところに一段位線を引いたり、調整します。

17. 続きはネットで
 詳しいコードは、ここに載っているみたいです
 http://gihyo.jp/dev/serial/01/windows-phone/0016(予定)
 http://gihyo.jp/dev/serial/01/windows-phone/0017 (予定)

18. まとめ

19. まとめ
 Windows Phone(Mobile)の良いところは、
気取らないところ、素朴なところ。
 でもオシャレなUIを作るには、
イマドキのスマートフォンのようなボタンを
使っていきたいですね。

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