Silverlight Create RippleEffect in VB.NET

 RippleEffect: The RippleEffect is a term used to describe a situation where, like the ever expanding ripples across water when an object is dropped into it, an effect from an initial state can be followed outwards incrementally. The basic idea is using a regular Silverlight 4 RippleEffect. For the purpose of demonstration a RippleEffect is added to the LayoutRoot. The Flexible Surface Effect itself is going to be achieved through a StoryBoard in which the values of the RippleEffect are changed over the timeline.  A Rectangle as a layer above the LayoutRoot reacts on the MouseLeftButtonDown event, catches the mouse position and passes it to the center value of the RippleEffect that is attached to the LayoutRoot.

This effect allows a user to click on the UI as if he taps with his finger on surface water. Since there is a RippleEffect for Silverlight 4 the implementation is quite straightforward. And the result is pretty scalable

Example of RippleEffect

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" 
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
             mc:Ignorable="d"
       x:Class="ClickAndMorphLab.MainPage"
       Width="560" Height="600">
       <UserControl.Resources>
              <Storyboard x:Name="sbClickeRipple">
                     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(RippleEffect.Frequency)" Storyboard.TargetName="LayoutRoot">
                           <SplineDoubleKeyFrame KeyTime="0" Value="30"/>
                           <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0">
                                  <EasingDoubleKeyFrame.EasingFunction>
                                         <SineEase EasingMode="EaseOut"/>
                                  </EasingDoubleKeyFrame.EasingFunction>
                           </EasingDoubleKeyFrame>
                     </DoubleAnimationUsingKeyFrames>
                     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(RippleEffect.Magnitude)" Storyboard.TargetName="LayoutRoot">
                           <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                           <EasingDoubleKeyFrame KeyTime="0:0:0.20" Value="0.04"/>
                           <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0">
                                  <EasingDoubleKeyFrame.EasingFunction>
                                         <SineEase EasingMode="EaseOut"/>
                                  </EasingDoubleKeyFrame.EasingFunction>
                           </EasingDoubleKeyFrame>
                     </DoubleAnimationUsingKeyFrames>
                     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(RippleEffect.Phase)" Storyboard.TargetName="LayoutRoot">
                           <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                           <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0">
                                  <EasingDoubleKeyFrame.EasingFunction>
                                         <SineEase EasingMode="EaseOut"/>
                                  </EasingDoubleKeyFrame.EasingFunction>
                           </EasingDoubleKeyFrame>
                     </DoubleAnimationUsingKeyFrames>
              </Storyboard>
       </UserControl.Resources> 
       <Grid x:Name="LayoutRoot" Background="Black">
              <Grid.Effect>
                     <ee:RippleEffect x:Name="myRipple" Phase="4" Magnitude="0" Frequency="2"/>
              </Grid.Effect>
              <VisualStateManager.CustomVisualStateManager>
                     <ei:ExtendedVisualStateManager/>
              </VisualStateManager.CustomVisualStateManager>
              <VisualStateManager.VisualStateGroups>
                     <VisualStateGroup x:Name="RippleClickStates"ei:ExtendedVisualStateManager.UseFluidLayout="True">
                           <VisualStateGroup.Transitions>
                                  <VisualTransition GeneratedDuration="0:0:2"/>
                           </VisualStateGroup.Transitions>
                           <VisualState x:Name="normal"/>
                           <VisualState x:Name="clicked"/>
                     </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <TextBlock x:Name="textBlock" HorizontalAlignment="Center" TextWrapping="Wrap"Text="CLICK TO SEE THE EFFECT" VerticalAlignment="Top"
               FontFamily="Courier New" FontSize="56" Foreground="White" Margin="0,20,0,0"Canvas.ZIndex="-1"/>
        <Rectangle x:Name="rClick" Fill="White" Opacity="0.30" Height="600" Width="560"d:LayoutOverrides="VerticalMargin"/>
    </Grid>
</UserControl>

//File: Page.xaml.cs

Partial Public Class MainPage
       Inherits UserControl 
       Public Sub New()
              InitializeComponent()
  End Sub 
    Private Sub rClick_MouseLeftButtonDown(ByVal sender As Object, ByVal a AsSystem.Windows.Input.MouseButtonEventArgs) 
Handles rClick.MouseLeftButtonDown 
        Dim CP As Point = a.GetPosition(rClick)
        CP.X /= 560
        CP.Y /= 600
        myRipple.Center = CP
        sbClickeRipple.Begin() 
    End Sub
End Class

Output Window


 

Conclusion

Hope this article explain you how to create a flexible surface using RippleEffect in Silverlight.