まず初めに、このプログラムで実装する機能の動作を、下記に解説しておきます

RippleEffectは、画像に波紋をシミュレートする効果です。画面に表示されている画像やタイトルをマウスでクリックすると、クリックした点を中心に波紋が広がる効果を得られます（図1）

今回のサンプルは以下よりダウンロードできます。

新規プロジェクトの作成

早速サンプルを作っていきましょう本稿では開発言語にVisual Basicを用います。

VS 2010のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]を選択します次に、「Silverlight アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「SL4_RippleEffect」という名前を付けています

ソリューションエクスプローラー内にImageというフォルダを作成して、1枚の画像も追加しておきます。ダウンロードされたサンプル?ファイルには画像は追加済みです

、Rectangleコントロールを配置します。必ずRectangleコントロールを最後に配置するようにしてください最後に配置したコントロールが一番湔面に配置されます。このサンプルでは、Rectangleコントロール上でマウスの左ボタンが押された時、RippleEffectが働くようにする必要がありますので、Rectangleコントロールが最前面に配置される必要があります

ImageのWidthには640、Heightには480と指定します。これは画像の実寸のサイズですImageのSourceプロパティにImageフォルダ内の画像を指定します。

TextBlockのTextプロパティには「RippleEffect Sample」と指定し、FontSizeに40で太字、書体にGeorgiaを指定していますこれらのプロパティは、TextBlockのプロパティから[テキスト]を展開して表示される項目から設定ができます。ここは、各自が適当に設定していただいても問題はありません

書き出されるコードはリスト1のようになります。

ソリューションエクスプローラー内の、MainPage.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く(X)」を選択し、Blend4を起動します。

Blend4の[アセット(T)]パネルをクリックし、「コントロール」からRippleを検索して表示させます「検索」欄に「Ripp」と入力すると、Rippleが表示されます（図3）。

表示されたRippleを「オブジェクトとタイムライン(B)」内のLayoutRoot要素上にドラッグ&ドロップします（図4）

追加したRippleEffectを選択して表示されるプロパティの、「名前」にmyRippleEffectと指定し、Frequencyに0、 Magnitudeに0、 Phaseに0と指定しておきます（図5）。Frequencyにはシェーダー内の周波数の値を指定しますMagnitudeにはシェーダー内の振幅の値を指定します。Phaseにはシェーダー内のフェーズ値を指定します

「オブジェクトとタイムライン(B)」の下にあるストーリーボードの「噺規作成」アイコン(＋)をクリックし、RippleEffectStoryboardというストーリーボードを作成します（図6）。

アートボード上の画面全体が赤の枠線で囲まれ、「●RippleEffectStoryboardタイムライン記録オン」に変わりますこの状態でタイムラインの記録が可能になります。

これから以下の作業は、再生ヘッドの位置に応じて、各プロパティの値を設定する作業となりますこれらのプロパティ値は、後ほど紹介する、表1にまとめていますので、そちらを参考に値を設定してもかまいません。

「タイムラインとオブジェクト(B)」内のRippleEffectを選択し、タイムラインの黄色い再生ヘッドを0秒に合わせますRippleEffectのプロパティ「Frequency」に30と指定します。「Magnitude」には0、Phaseには0と指定します既に0が初期値として入力されている場合も、上書きで0と入力してください。Centerの値はデフォルトの0.5のままです

「オブジェクトとタイムライン(B)」内のRippleEffectのEffect内に、いま設定したプロパティが追加されます（図7）。

次に再生ヘッドを0.3秒の位置に移動し、「オブジェクトとタイムライン(B)」内の、RippleEffectを選択した状態で、「Magnitude」に0.04と指定します「Frequency」と「Phase」には何もしないでおきます。

次に再生ヘッドを0.6秒の位置に移動し、「Frequency」に0、「Magnitude」に0、「Phase」に0と指定します既に、0が入力されていても上書きで再入力してください。必ず、「オブジェクトとタイムライン(B)」内の、RippleEffectを選択した状態で表示される[共通プロパティ]で値を入仂してください

何も入力しなかったプロパティにも楕円のマークが追加されます（図8）。

上記でも問題はないのですが、アニメーションがぎこちなくなりますので、0.3秒時点（3つある楕円のマークの真ん中）の「Frequency」と「Phase」の楕円のマークを削除します楕円のマーク上でマウスの右クリックで表示されるメニューから「削除」を選択します（図9）。

ここまでの手順をまとめると、表1のようになります

「●RippleEffectStoryboardタイムライン記録オン」の●をクリックしてオフとし、Blend4を終了してVS2010に戻ります。

ソリューションエクスプローラー内のMainPage.xamlを展開して表示されるMainPage.xaml.vbをダブルクリックしてリスト2のコードを記述します

ロジックコードを記述する

VS2010メニューの「デバッグ(D)／デバッグ開始(S)」と実行してみましょう。画像上でマウスをクリックしても何の反応もないと思いますこれは、RectangleコントロールにFillの値を指定していないことが原因です。

RectangleのFillプロパティにWhiteと指定しますFillにWhiteを指定すると図11のように画像やタイトルが隠れてしまいます。そこでOpacityに0を指定し透明化させますタイトルと画像が表示されます。

Rectangleは最終的に透明化しますので、Fillに指定する色は何色でも構いませんこのサンプルではWhiteを指定していますが、RedでもBlueでも問題ありません。Fillに値を指定することが重要です

書き出されるコードはリスト3のようになります。

VS2010メニューの、「デバッグ(D)／デバッグ開始(S)」と実行して、動作を確認してください