Bouncing balls animation in Silverlight XAML only

Question

In Silverlight, is it possible to do a "bouncing balls" style animation entirely in XAML - that is, with no code-behind at all?

Answer 1

It depends. If you want the physics of the bouncing balls to be simulated at runtime (e.g. to enable interactivity) then that would not be straight-forward to do in pure Xaml. If you just want to play a predefined animation (e.g. as if it were a video) then you could do that via Storyboards and Keyframes. However, this would very likely end up with a very large and very complex Xaml file.

What are you trying to do and why do you want to avoid using code?

Answer 2

ofcourse! It is 100% possible to do it entirely in XAML. Using easing functions you can get the physics of the bouncing balls in no time.

Answer 3

By using a physics simulation library, such as physicshelper, you could use XAML to do most, if not all of the work for you. Issues such as collision, etc. would all be handled as behaviors. It's not pure XAML (as it would require a runtime binary reference), but it's the closest you'd probably get without animating the entire scene as a giant Storyboard. Check out this for example, which uses no code.

Answer 4

This is what I came up with -

<UserControl.Resources>
    <Storyboard  x:Name="bounce" >
        <DoubleAnimation Storyboard.TargetName="Ellipse1" 
                Duration="0:0:4" From="0" To="200" 
                RepeatBehavior="Forever" 
                AutoReverse="True" 
                Storyboard.TargetProperty="(Canvas.Top)">
        </DoubleAnimation>
        <DoubleAnimation Storyboard.TargetName="Ellipse1" 
                Duration="0:0:3" From="0" To="200" 
                RepeatBehavior="Forever" 
                AutoReverse="True" 
                Storyboard.TargetProperty="(Canvas.Left)">
        </DoubleAnimation>
    </Storyboard>

</UserControl.Resources>

<Canvas x:Name="LayoutRoot" Background="White">
    <Ellipse Canvas.Left="81" Canvas.Top="63" Height="35" Name="Ellipse1"
        Stroke="#FF190000" StrokeThickness="1" Width="34" Fill="#FF190000" />
</Canvas>

You still need some code to kick it off, though -

bounce.Begin();