マウスクリックによるRippleEffect特殊効果

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

リスト2　(MainPage.xaml.vb)

Option Strict On
Partial Public Class MainPage
  Inherits UserControl

	Public Sub New()
  	InitializeComponent()
  End Sub

■Rectangleコントロール上でマウスの左ボタンが押された時の処理
Rectangleコントロール上の、マウスポインタの位置のX座標とY座標を取得します。 取得したマウスポインタのX座標の値をRectangleのWidthの値である640で除算し、現在のマウスポインタのX座標の値とします。取得したマウスポインタのY座標の値をRectangleのHeightの値である560で除算し、現在のマウスポインタのY座標の値とします。これらのXとY座標をmyRippleEffectのCenterプロパティの値に指定します。RippleEffectStoryboardストーリーボードを開始します。Rectangle上でマウスがクリックされた時、クリックした点を中心に波紋が広がります。
  Private Sub Rectangle1_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Rectangle1.MouseLeftButtonDown
  	Dim myPosition As Point = e.GetPosition(Rectangle1)
  	myPosition.X = myPosition.X / 640
  	myPosition.Y = myPosition.Y / 560
  	myRippleEffect.Center = myPosition
  	RippleEffectStoryboard.Begin()
  End Sub
End Class

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

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

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

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

リスト3　書き出されたXAMLコードの一部（MainPage.xaml）

（１）<Rectangle>要素のFillプロパティにWhiteを指定し、Opacityに0を指定して、透明化しています。
  ～コード略～
<Grid x:Name="LayoutRoot" Background="White" Width="640" Height="560">
  <Grid.Effect>
  	<ee:RippleEffect x:Name="myRippleEffect" Frequency="0" Magnitude="0" Phase="0"/>
  </Grid.Effect> 
  <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" />
  <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" />
  <Rectangle Height="560" HorizontalAlignment="Left" x:Name="Rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="640" Fill="White" Opacity="0"/>　■（１）
  </Grid>
～コード略～

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