Blog

Squeeze Ball Animation in XAML

Posted by Mahesh Chand Blogs | XAML May 07, 2008
This XAML code creates a ball that gives an impression of squeezing a sponge ball.

This animation start with ball in Image 1 and ends with ball in Image 2 and continues indefinitely.
 

Image 1.

Image 2.

Providing this animation in XAML is simply Stodyboard DoubleAnimation with changing TargetProperty Height from 100 to 200 and repeat it forever.

Here is the sample XAML code:

<Window
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="AnimationXAML.Window1"
 x:Name="Window"
 Title="Window1"
 Width="640" Height="480">
 <Grid x:Name="LayoutRoot" Margin="10" >
 
 
 <Ellipse
   Name="RedBall"
   Width="200"
   Height="200"
   Fill="Red"> 
   <Ellipse.Triggers>
     <EventTrigger RoutedEvent="Ellipse.Loaded">
       <BeginStoryboard>
         <Storyboard>
           <DoubleAnimation
             Storyboard.TargetName="RedBall"
             Storyboard.TargetProperty="Height"
             From="100" To="200" Duration="0:0:5"
    AutoReverse="True"  RepeatBehavior="Forever"/>   
      </Storyboard>
       </BeginStoryboard>
     </EventTrigger>
   </Ellipse.Triggers>
 </Ellipse>
 
  </Grid>
</Window>

COMMENT USING
PREMIUM SPONSORS
Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.
SPONSORED BY
  • MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.
Employers - Post Free Jobs