Squeeze Ball Animation in XAML

By Mahesh Chand 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>

Mahesh Chand

C# Corner founder, 10-times Microsoft MVP, technical author, and software architect. Mahesh authored his first book, A Programmer’s Guide to ADO.NET in C# with APress at the age of 25. C# Corner is a memb... Read more

COMMENT USING