マウスクリックによるRippleEffect特殊効果
2011年5月10日(火)
ロジックコードを記述する
リスト2 (MainPage.xaml.vb)
01 | Option Strict On |
02 | Partial Public Class MainPage |
03 | Inherits UserControl |
04 |
05 | Public Sub New() |
06 | InitializeComponent() |
07 | End Sub |
08 |
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() |
17 | End Sub |
18 | 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）
01 | （１）<Rectangle>要素のFillプロパティにWhiteを指定し、Opacityに0を指定して、透明化しています。 |
02 | ～コード略～ |
03 | <Grid x:Name="LayoutRoot" Background="White" Width="640" Height="560"> |
04 | <Grid.Effect> |
05 | <ee:RippleEffect x:Name="myRippleEffect" Frequency="0" Magnitude="0" Phase="0"/> |
06 | </Grid.Effect> |
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"/> ■（１） |
10 | </Grid> |
11 | ～コード略～ |
VS2010メニューの、「デバッグ(D)／デバッグ開始(S)」と実行して、動作を確認してください。
「マウスクリックによるRippleEffect特殊効果」サンプルプログラム
連載バックナンバー
Think ITメルマガ会員登録受付中
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。
