PR

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

2011年5月10日(火)
PROJECT KySS

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

リスト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に値を指定することが重要です。

図11:RectangleのFillにWhiteを指定すると画像とタイトルが隠れる(クリックで拡大)

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

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

(1)<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"/> ■(1)
  </Grid>
~コード略~

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

Think IT会員限定特典
  • 「マウスクリックによるRippleEffect特殊効果」サンプルプログラム

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています