20100717 windows phone で作るグラデーションボタン

Windows phoneで作る グラデーションボタン

CH３COOH(酢酸)

CH3COOH（酢酸）

大阪で働くIT系サラリーマン

2008年に芋星(S１１HT)を購入しました。

普通にケータイで見ることの出来ていた 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のデフォルトなボタンは 今よりもっとシンプルなんだよね・・・

ちなみに

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