WP7 カスタムボタンの作成

silverlightでのアプリ作成は VS2010を使いますが、GUI部分の構成はExpression blend4 を使います。もちろんblendを使わなくても構わないのですが、使った方が遥かに楽ができます。

たとえばuGReaderの記事リスト等はデータコレクションを含むクラスを元にblend上でサンプルデータを自動作成して、そのサンプルデータをlistboxにドラッグ＆ドロップするだけで、適当なリスト表示のテンプレートが出来上がります。

あとはGUIで並べなおすだけで出来上がってしまいます。

手順さえ解っていればホントにあっという間に出来上がりです。

おもしろいのはボタン等のGUI部品も簡単に自分で作れてしまいます。しかもアニメーションをバシバシいれた派手なものまでプログラムコードを一切書かなくてもできます

という話しを聞いただけでは面白くないので、自分でもやってみることにします


uGReaderのスターアイコンをトグルスイッチとして動作するような部品を作ります。
ONの時に星が光って、OFFの時は消えるスイッチです


参考にしたのは　ココのチュートリアル
http://msdn.microsoft.com/ja-jp/library/bb613598.aspx


まず以前に作ったpng画像をもとに作ってみましたが、pathを使って直接レンダリングする方が面白そうなので途中で路線変更

スターマークの　XAMLはこんな感じで出来上がりました

ここにXAMLを入れたかったけど、＜＞いっぱいで表示できなかった

大変だったのは星の絵を作るところですね。なんかバランス悪いし

で、出来上がったスター画像をボタンに変更します。Make Into Contorol　です。ここでToggleButtonを選びます

基本的にはこれだけでボタンとして動作する部品が出来上がります。ただし、押しても、Checke/UnCheck状態でも見た目が変わらないので、押したときと、チェック状態の時と、アンチェック状態の時の見た目を変えます

面白いのは、状態の変わったときとか、押されている間とかにタイムラインでアニメーションを指定する事ができます。アニメーションは、ボタンの色、透明度、平行移動、回転、拡大縮小、変形、３次元座標変換等なんでもできちゃう感じ。ページをめくるような動作もできます。操作画面はSoftimageとかの３ｄソフトみたいです。

作ったら、エミュレータで即実行できます。押してる間、拡大して、星がくるくる回るようにしてみました。（無駄ですが）

リスト表示に組み込んでみました。これら作業にプログラムコードは一切書いてません！ほんとに簡単にできます。（実際は作業に半日かかりましたけど）

この動き、動画で見せたいですねー