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

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

自己紹介

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

MS-MVPを受賞しました！

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

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

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

うらやましい

 角丸でグラデーションの掛かったボタンって
かっこいいですね
 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のデフォルトなボタンは
今よりもっとシンプルなんだよね・・・

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

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

Recommended

Recommended

More Related Content

Similar to 20100717 Windows Phone で作るグラデーションボタン

Similar to 20100717 Windows Phone で作るグラデーションボタン (15)

More from Kenji Wada

More from Kenji Wada (6)

Recently uploaded

Recently uploaded (7)

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