まず初めに、このプログラムで実裝する機能の動作を、下記に解説しておきます。
RippleEffectは、畫像に波紋をシミュレートする効果です。畫面に表示されている畫像やタイトルをマウスでクリックすると、クリックした點を中心に波紋が広がる効果を得られます（図1）。
第2回 マウスクリックによるRippleEffect特殊効果 図1：クリックした點を中心に波動が広がっている（クリックで拡大）
今回のサンプルは以下よりダウンロードできます。
→ 今回のサンプルファイル（895KB）
新規プロジェクトの作成 早速サンプルを作っていきましょう。本稿では開発言語にVisual Basicを用います。
VS 2010のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]を選択します。次に、「Silverlight アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「SL4_RippleEffect」という名前を付けています。
ソリューションエクスプローラー内にImageというフォルダを作成して、1枚の畫像も追加しておきます。ダウンロードされたサンプル・ファイルには畫像は追加済みです。
コントロールの配置 <UserControl>要素のWidthに680、Heightに600と指定します。x:NameがLayoutRootの<Grid>要素のWidthに640、Heightに560と指定します。ツールボックスからImage、TextBlock 、Rectangleコントロールを配置します。必ずRectangleコントロールを最後に配置するようにしてください。最後に配置したコントロールが一番前面に配置されます。このサンプルでは、Rectangleコントロール上でマウスの左ボタンが押された時、RippleEffectが働くようにする必要がありますので、Rectangleコントロールが最前面に配置される必要があります。
ImageのWidthには640、Heightには480と指定します。これは畫像の実寸のサイズです。ImageのSourceプロパティにImageフォルダ内の畫像を指定します。
TextBlockのTextプロパティには「RippleEffect Sample」と指定し、FontSizeに40で太字、書體にGeorgiaを指定しています。これらのプロパティは、TextBlockのプロパティから[テキスト]を展開して表示される項目から設定ができます。ここは、各自が適當に設定していただいても問題はありません。
RectangleのWidthとHeightは<Grid>要素のWidthとHeightに同じです。図2のように配置します。
第2回 マウスクリックによるRippleEffect特殊効果 図2：Image、TextBlock、 Rectangleコントロールを配置しプロパティを設定した（クリックで拡大）
書き出されるコードはリスト1のようになります。
リスト1 書き出されたXAMLコード(MainPage.xaml) 01
（１）<Rectangle>要素が最後に記述されているため、最前面に配置されることになります。
02
<UserControl x:Class="SL4_RippleEffect.MainPage"
03
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
05
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
06
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08
d:DesignHeight="300" d:DesignWidth="400" Width="680" Height="600">
10
<Grid x:Name="LayoutRoot" Background="White" Width="640" Height="560">
11
<Image Height="480" HorizontalAlignment="Left" Margin="0,80,0,0" x:Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="640" Source="/SL4_RippleEffect;component/Image/黃色い花.jpg" />
12
<TextBlock Height="54" HorizontalAlignment="Left" Margin="100,20,0,0" x:Name="TextBlock1" Text="RippleEffect Sample" VerticalAlignment="Top" Width="446" FontSize="40" FontWeight="Bold" FontFamily="Georgia" />
13
<Rectangle Height="560" HorizontalAlignment="Left" x:Name="Rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="640" /> ■（１）
ソリューションエクスプローラー内の、MainPage.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く(X)」を選択し、Blend4を起動します。
Blend4でのRipple特殊効果の設定 Blend4の[アセット(T)]パネルをクリックし、「コントロール」からRippleを検索して表示させます。「検索」欄に「Ripp」と入力すると、Rippleが表示されます（図3）。
第2回 マウスクリックによるRippleEffect特殊効果 図3：「検索」欄に「Ripp」と入力して、Rippleが表示された
表示されたRippleを「オブジェクトとタイムライン(B)」内のLayoutRoot要素上にドラッグ&ドロップします（図4）。
第2回 マウスクリックによるRippleEffect特殊効果 図4：RippleをLayoutRoot上にドラッグ&ドロップした
追加したRippleEffectを選択して表示されるプロパティの、「名前」にmyRippleEffectと指定し、Frequencyに0、 Magnitudeに0、 Phaseに0と指定しておきます（図5）。Frequencyにはシェーダー内の周波數の値を指定します。Magnitudeにはシェーダー内の振幅の値を指定します。Phaseにはシェーダー内のフェーズ値を指定します。
第2回 マウスクリックによるRippleEffect特殊効果 図5：RippleEffectのプロパティを設定する
Storyboardの作成 「オブジェクトとタイムライン(B)」の下にあるストーリーボードの「新規作成」アイコン(＋)をクリックし、RippleEffectStoryboardというストーリーボードを作成します（図6）。
第2回 マウスクリックによるRippleEffect特殊効果 図6：RippleEffectStoryboardという名前のストーリーボードを作成する（クリックで拡大）
アートボード上の畫面全體が赤の枠線で囲まれ、「●RippleEffectStoryboardタイムライン記録オン」に変わります。この狀態でタイムラインの記録が可能になります。
これから以下の作業は、再生ヘッドの位置に応じて、各プロパティの値を設定する作業となります。これらのプロパティ値は、後ほど紹介する、表1にまとめていますので、そちらを參考に値を設定してもかまいません。
「タイムラインとオブジェクト(B)」内のRippleEffectを選択し、タイムラインの黃色い再生ヘッドを0秒に合わせます。RippleEffectのプロパティ「Frequency」に30と指定します。「Magnitude」には0、Phaseには0と指定します。既に0が初期値として入力されている場合も、上書きで0と入力してください。Centerの値はデフォルトの0.5のままです。
「オブジェクトとタイムライン(B)」内のRippleEffectのEffect内に、いま設定したプロパティが追加されます（図7）。
第2回 マウスクリックによるRippleEffect特殊効果 図7：各プロパティが追加された（クリックで拡大）
次に再生ヘッドを0.3秒の位置に移動し、「オブジェクトとタイムライン(B)」内の、RippleEffectを選択した狀態で、「Magnitude」に0.04と指定します。「Frequency」と「Phase」には何もしないでおきます。
次に再生ヘッドを0.6秒の位置に移動し、「Frequency」に0、「Magnitude」に0、「Phase」に0と指定します。既に、0が入力されていても上書きで再入力してください。必ず、「オブジェクトとタイムライン(B)」内の、RippleEffectを選択した狀態で表示される[共通プロパティ]で値を入力してください。
何も入力しなかったプロパティにも楕円のマークが追加されます（図8）。
第2回 マウスクリックによるRippleEffect特殊効果 図8：何も指定しなかったプロパティにも楕円のマークが追加されている
上記でも問題はないのですが、アニメーションがぎこちなくなりますので、0.3秒時點（3つある楕円のマークの真ん中）の「Frequency」と「Phase」の楕円のマークを削除します。楕円のマーク上でマウスの右クリックで表示されるメニューから「削除」を選択します（図9）。
第2回 マウスクリックによるRippleEffect特殊効果 図9：0.3秒時點(3つある楕円のマークの真ん中)の「Frequency」と「Phase」の楕円のマークを削除する（クリックで拡大）
「Frequency」、「Magnitude」、「Phase」を選択して表示されるプロパティのEasingFunctionに、CubicInOutを選択します（図10）。「Frequency」、「Magnitude」、「Phase」すべてに対して設定してください。
第2回 マウスクリックによるRippleEffect特殊効果 図10：EasingFunctionプロパティにCubicInOutを指定する
ここまでの手順をまとめると、表1のようになります。
表1 RippleEffectStoryboard プロパティ名 再生ヘッドの位置（秒） EasingFunction 0.3 0.6 Frequency 30 記録なし CubicInOut Magnitude 0.04 CubicInOut Phase 記録なし CubicInOut
「●RippleEffectStoryboardタイムライン記録オン」の●をクリックしてオフとし、Blend4を終了してVS2010に戻ります。
ソリューションエクスプローラー内のMainPage.xamlを展開して表示されるMainPage.xaml.vbをダブルクリックしてリスト2のコードを記述します。
ロジックコードを記述する リスト2 (MainPage.xaml.vb) 02
Partial Public Class MainPage
09
■Rectangleコントロール上でマウスの左ボタンが押された時の処理
10
Rectangleコントロール上の、マウスポインタの位置のX座標とY座標を取得します。 取得したマウスポインタのX座標の値をRectangleのWidthの値である640で除算し、現在のマウスポインタのX座標の値とします。取得したマウスポインタのY座標の値をRectangleのHeightの値である560で除算し、現在のマウスポインタのY座標の値とします。これらのXとY座標をmyRippleEffectのCenterプロパティの値に指定します。RippleEffectStoryboardストーリーボードを開始します。Rectangle上でマウスがクリックされた時、クリックした點を中心に波紋が広がります。
11
Private Sub Rectangle1_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Rectangle1.MouseLeftButtonDown
12
Dim myPosition As Point = e.GetPosition(Rectangle1)
13
myPosition.X = myPosition.X / 640
14
myPosition.Y = myPosition.Y / 560
15
myRippleEffect.Center = myPosition
16
RippleEffectStoryboard.Begin()
VS2010メニューの「デバッグ(D)／デバッグ開始(S)」と実行してみましょう。畫像上でマウスをクリックしても何の反応もないと思います。これは、RectangleコントロールにFillの値を指定していないことが原因です。
RectangleのFillプロパティにWhiteと指定します。FillにWhiteを指定すると図11のように畫像やタイトルが隠れてしまいます。そこでOpacityに0を指定し透明化させます。タイトルと畫像が表示されます。
Rectangleは最終的に透明化しますので、Fillに指定する色は何色でも構いません。このサンプルではWhiteを指定していますが、RedでもBlueでも問題ありません。Fillに値を指定することが重要です。
第2回 マウスクリックによるRippleEffect特殊効果 図11：RectangleのFillにWhiteを指定すると畫像とタイトルが隠れる（クリックで拡大）
書き出されるコードはリスト3のようになります。
リスト3 書き出されたXAMLコードの一部（MainPage.xaml） 01
（１）<Rectangle>要素のFillプロパティにWhiteを指定し、Opacityに0を指定して、透明化しています。
03
<Grid x:Name="LayoutRoot" Background="White" Width="640" Height="560">
05
<ee:RippleEffect x:Name="myRippleEffect" Frequency="0" Magnitude="0" Phase="0"/>
07
<Image Height="480" HorizontalAlignment="Left" Margin="0,80,0,0" x:Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="640" Source="/SL4_RippleEffect;component/Image/黃色い花.jpg" />
08
<TextBlock Height="54" HorizontalAlignment="Left" Margin="100,20,0,0" x:Name="TextBlock1" Text="RippleEffect Sample" VerticalAlignment="Top" Width="446" FontSize="40" FontWeight="Bold" FontFamily="Georgia" />
09
<Rectangle Height="560" HorizontalAlignment="Left" x:Name="Rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="640" Fill="White" Opacity="0"/> ■（１）
VS2010メニューの、「デバッグ(D)／デバッグ開始(S)」と実行して、動作を確認してください。
