本稿の内容は，Silverlight 2，Silverlight 3に共通です。Silverlight 3開発環境の場合は，第2回目のカコミ記事を参照して，環境を構築してください。ただし，画面キャプチャは，Silverlight 2を基本としています。
前回は，検索キーの生成処理について解説しました。今回は，検索キーを視覚的に表す処理について解説します。
Expression Designによる部品の作成
基本の画像を作成して流用する
前回は，Sliderコントロールのスライダーをドラッグした時に得られる値から，検索キーとする色の16進数を生成する処理について説明しました。この段階では，まだ，コントロールを適当にレイアウトしただけで，視覚的要素の何もない画面となっています。今回は，スライダーのドラッグにより選択された色を視覚的に把握できるよう，検索キー入力ボックス内やルーペの向こう側の花の色を，生成した色に変更する処理を実装していきます。これで，画面の左半分が出来上がります。
本稿では画像の作成方法についても取り上げますが，XAMLドキュメントの処理では，画像を知ってコードを書くことも必要になります。作図方法を把握しておく方が，処理を理解しやすくなります。
最初に作成するのは，5枚の花びらの小さな花の画像です。この画像を1枚だけ作成しておき，スライダー部分や白い花と黒い花，検索キー入力ボックス内の小さい花の作図に流用します。
Expression Designで花びらを1枚描き，コピーして72°（5/360°）ずつ回転させ，5枚の花びらを作ります＊1。これらを「オブジェクト」メニューの「パス演算/合算」で1つながりのパスにし，不要個所があれば個別選択ツールで選択して削除し，「楕円」ツールで中央の蕊の円弧を描いておきます（図1）。花びらと蕊は「整列/グループ化」でまとめておくと選択しやすく作業がラクになります。
