PR
PROJECT KySS(プロジェクト・キッス)
四国のSOHO。薬師寺 国安(フリープログラマ)と薬師寺聖(個人事業所自営)による,コラボレーション・ユニット。1997年結成。XMLや.NETプログラミングに関する執筆多数。両名とも,Microsoft MVP for Data Platform Development (Oct 2003-Sep 2010),http://www.PROJECTKySS.NET
完成アプリケーション。画像をクリックすると,サンプル・アプリケーションの動作を確認できます
完成アプリケーション。画像をクリックすると,サンプル・アプリケーションの動作を確認できます

 本稿の内容は,Silverlight 2,Silverlight 3に共通です。Silverlight 3開発環境の場合は,第2回目のカコミ記事を参照して,環境を構築してください。ただし,画面キャプチャは,Silverlight 2を基本としています。

 今回のサンプルファイルは,こちらからダウンロードできます。Silverlight 2 アプリケーションは「PantomimeSearch 」プロジェクト,Silverlight 3 アプリケーションは「PantomimeSearch_3_Silverlight3」プロジェクトです。第3回目のプロジェクトに,第4回目,第5回目と処理を追加しながら完成させていくため,前回と同じプロジェクト名になっています。

 前回は,検索キーの生成処理について解説しました。今回は,検索キーを視覚的に表す処理について解説します。

Expression Designによる部品の作成

基本の画像を作成して流用する

 前回は,Sliderコントロールのスライダーをドラッグした時に得られる値から,検索キーとする色の16進数を生成する処理について説明しました。この段階では,まだ,コントロールを適当にレイアウトしただけで,視覚的要素の何もない画面となっています。今回は,スライダーのドラッグにより選択された色を視覚的に把握できるよう,検索キー入力ボックス内やルーペの向こう側の花の色を,生成した色に変更する処理を実装していきます。これで,画面の左半分が出来上がります。

 本稿では画像の作成方法についても取り上げますが,XAMLドキュメントの処理では,画像を知ってコードを書くことも必要になります。作図方法を把握しておく方が,処理を理解しやすくなります。

 最初に作成するのは,5枚の花びらの小さな花の画像です。この画像を1枚だけ作成しておき,スライダー部分や白い花と黒い花,検索キー入力ボックス内の小さい花の作図に流用します。

 Expression Designで花びらを1枚描き,コピーして72°(5/360°)ずつ回転させ,5枚の花びらを作ります*1。これらを「オブジェクト」メニューの「パス演算/合算」で1つながりのパスにし,不要個所があれば個別選択ツールで選択して削除し,「楕円」ツールで中央の蕊の円弧を描いておきます(図1)。花びらと蕊は「整列/グループ化」でまとめておくと選択しやすく作業がラクになります。

図1●Expression Designで基本の画像を作成しておく
図1●Expression Designで基本の画像を作成しておく
[画像のクリックで拡大表示]
*1 図形をコピーする際,「Alt」キーを押しながらドラッグして同じ図形を増やすと,「編集/貼り付け」あるいは「編集/前面に貼り付け」同様,XAMLでは後の兄弟ノードになります。図形を回転させるために,画面下の「回転角度」のポインタをドラッグするのではなく「回転角度」を直接入力する場合は,指定方法が時計回りではないので注意してください。