20100717 windows phone で作るグラデーションボタン
DESCRIPTION
わんくま同盟 大阪勉強会 #37 にて、Windows Mobile 6.xでグラデーションのかかったボタンを作る方法についてお話をさせて頂きました。TRANSCRIPT
Windows phoneで作る グラデーションボタン
CH3COOH(酢酸)
CH3COOH(酢酸)
大阪で働くIT系サラリーマン
2008年に芋星(S11HT)を購入しました。
普通にケータイで見ることの出来ていた Webサイトが見れなくなったのがショックで、 専用のビューア作ったり、作ってもらったりと、 Windows Phoneをいじり続けていました。
wikiやブログにTipsを書いたり、 ビューアを書いて公開していたところ、、、
自己紹介
7月1日にDevice Application Developmentの コンピテンシでMVPを受賞したというメールが届きました。
どうみてもMVPです。本当にありがとうございました。
MS-MVPを受賞しました!
突然ですが、ボタンです。
Windows Mobile 6.5の 標準ボタンを見た事がありますか
iPhone/Androidのボタン
角丸でグラデーションの掛かったボタンって かっこいいですね
Windows Mobile 6.5のボタンはシンプルですね
グラデーションボタンが欲しいですね
作ってみましょう!
うらやましい
Windows phoneで グラデーションを使ってみる
マネージコードからはP/Iでグラデ
GradientFill関数を使うとグラデーションが描けます。
マネージコードな方は、いつも通りP/Invokeしてください
任意の形でグラデーション を描画する
マスク的なイメージを作る
.NET Compact Frameworkには、GradientBrushとか便利なものはありません。マスク的なイメージを作ります。
マスク的なイメージを使ってみる
緑色の円形を透過させて、元のグラデーションイメージに上書きします
任意の形のグラデーションイメージ
これで任意の図形のグラデーションが出来ました。
あとは描画するだけ
あとは、マゼンタの部分を透過させて 好きな場所に描画させましょう!
Windows Mobileで 角丸でグラデーションの掛かった パッと見た感じiPhoneかな?と 思わせるようなボタンを作ってみる
Windows Messageをフックするクラスを使って、サブクラス化したコントロールで適切に描画処理を呼ぶだけ。
作ってみた
続きはネットで
詳しいコードは、ここに載っているみたいです (原稿が進んでいなくて申し訳ありません・・・)
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 (予定)
まとめ
Windows phoneの世界では みんながアプリごとにボタンを独自実装してます
本当はプラットフォームとして統一してくれるのが、 ユーザーにとっても開発者にとっても幸せなんだけど・・・
ボタンをサブクラス化して、Windows Messageを拾って、P/Iした関数呼ぶだけ。ちょうかんたんにイマドキのスマートフォンっぽいグラデーションボタンを作れるよ。
まとめ
Windows Phone 7のデフォルトなボタンは 今よりもっとシンプルなんだよね・・・
ちなみに
ご清聴有難うございました