Sharker Khaleed Mahmud Silverlight Tips & Tricks

August 31, 2010

86. Multipurpose Ripple motion in Silverlight

Filed under: Silverlight — Tags: , , , — Sharker Khaleed Mahmud | shamrat231 @ 9:27 AM

[tweetmeme source=”shamrat231” only_single=false]

We all should be familiar with wave concept. If you throw a stone in water you can see how the motion plays out in water. I will try to create a sample animation which tries to replicate ripple motion in blend. I will not be using the ripple effect in Blend, but will create an animated one from scratch. This ripple is a bit different then the blend ripple effect. This ripple motion can be used for various purposes like in bing maps or giving some side effects in your site layout, some flashy click event and other times in your splash screen while showing the progress bar.

You can see the live example here [live demo]   

The SOURCE CODE(.zip) is at the end of the page for download.

Now lets look at a simple ripple picture above. The movement is from center to outward and it has like 4 circles in it. Now lets talk in terms of blend.

1. 4 circle ~ 4 ellipse (I will demonstrate with 3)
2. Blue line ~ ellipse border
3. Ripple motion ~ apply story storyboard to enlarge ellipse.

So basically if we create those above steps we can have a static ripple created. Lets start with the 3 circle. Each circle should be placed in such way that one is bigger than the other and should look like a ripple. Here goes the code.

<Ellipse HorizontalAlignment=”Left” VerticalAlignment=”Stretch” Width=”118.5″ Opacity=”1″ Fill=”#00FFFFFF” Stroke=”#FFC4D0E3″ StrokeThickness=”0″ x:Name=”WaterRipple1″ RenderTransformOrigin=”0.5,0.5″ Grid.Column=”1″ Grid.Row=”1″ Height=”118.5″>
        </Ellipse>
        <Ellipse HorizontalAlignment=”Left” VerticalAlignment=”Stretch” Width=”118.5″ Opacity=”1″ Fill=”#00FFFFFF” Stroke=”#FFC4D0E3″ StrokeThickness=”0″ x:Name=”WaterRipple2″ RenderTransformOrigin=”0.5,0.5″ Grid.Column=”1″ Grid.Row=”1″ Visibility=”Visible” Height=”118.5″>
        </Ellipse>
        <Ellipse HorizontalAlignment=”Left” VerticalAlignment=”Stretch” Width=”50″ Opacity=”1″ Fill=”#00FFFFFF” Stroke=”#FFC4D0E3″ StrokeThickness=”0″ x:Name=”WaterRipple3″ RenderTransformOrigin=”0.5,0.5″ UseLayoutRounding=”False” d:LayoutRounding=”Auto” d:LayoutOverrides=”GridBox” Height=”50″ Margin=”33.335,119.66,0,130.339″>
        </Ellipse>
        <Ellipse HorizontalAlignment=”Left” VerticalAlignment=”Stretch” Width=”90″ Opacity=”1″ Fill=”#00FFFFFF” Stroke=”#FFC4D0E3″ StrokeThickness=”0″ x:Name=”WaterRipple4″ RenderTransformOrigin=”0.5,0.5″ Visibility=”Visible” Height=”90″ Margin=”13,100,0,110″ d:LayoutOverrides=”GridBox”>
        </Ellipse>

For each ellipse, I will animate these property, so it will give an effect of enlarging and compressing. The idea is the circle will go bigger and smaller with time line.

1. ScaleX
2. ScaleY
3. TranslateX
4. TranslateY
5. StrokeThickness
6. Opacity
7. Stroke
8. Fill

Creating a control

Now, after spending some quality time by manipulating I created a simple ripple effect. Now for ease of use, lets put it to a separate user control.

Now apply our newly created control on water surface. For demonstration, I will apply it in a water surface taken from a game level.

MainPage.xaml

<UserControl x:Class=”Ripple.MainPage”
    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:motions=”clr-namespace:Ripple”
    mc:Ignorable=”d”
    d:DesignHeight=”1024″ d:DesignWidth=”768″>
    <Grid x:Name=”LayoutRoot” Background=”Black”>
        <Grid Width=”768″ Height=”576″>
            <Image Source=”Images/water.png” />
            <motions:RippleMotion HorizontalAlignment=”Right” Margin=”0,344,220,0″ VerticalAlignment=”Top” d:LayoutOverrides=”Width, Height”/>
            <motions:RippleMotion HorizontalAlignment=”Left” Margin=”202,325,0,0″ VerticalAlignment=”Top” d:LayoutOverrides=”Width, Height”/>
            <motions:RippleMotion HorizontalAlignment=”Right” Margin=”0,290,220,0″ VerticalAlignment=”Top” d:LayoutOverrides=”Width, Height”/>
            <motions:RippleMotion Margin=”269,-71,-269,71″/>
            <motions:RippleMotion Margin=”217,54,-217,-54″ />
            <motions:RippleMotion Margin=”135,-71,-135,71″ />
        </Grid>
    </Grid>
</UserControl>

As always, you can download the source code from here [download link]   

Sharker Khaleed Mahmud
Web Developer

Advertisements

2 Comments »

  1. […] Multi-Purpose Ripple Motion in Silverlight (Sharker Khaleed Mahmud) […]

    Pingback by Windows Client Developer Roundup 040 for 9/6/2010 - Pete Brown's 10rem.net — September 6, 2010 @ 7:40 AM

  2. Multi Purpose Grid…

    […] ll create an animated one from scratch. This ripple is a bit different then the […]…

    Trackback by Vision Catalog Blog — October 31, 2010 @ 2:37 AM


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: