Silverlight how-to: Sliding in an image with clip geometry using xaml
On of the really cool things about Microsoft Silverlight is the ability to implement animations in xaml. What I'm going to demonstrate here is how to extend the code we looked at in my previous post about the PathMaker tool to animate the toucan up from the bottom of the surface. It will look like he's poking his head up after hearing something in the jungle...
So what we're going to do is take the last XAML example:
<Canvas xmlns="https://schemas.microsoft.com/client/2007" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Name="root" Width="600" Height="400"> <Image Source="jungle.jpg"/> <Image Source="toucan.jpg" Clip="…"/> …clip geometry removed for clarity </Canvas> |
And make the following changes:
- Wrap the image with a container Canvas
- Add the appropriate Canvas.Triggers xaml section to implement the animation
- Specify what triggers the animation (Canvas being loaded)
- Create a Storyboard (container for multiple animations that can all be manipulated together)
- Add a DoubleAnimation to the Storyboard that targets the "toucan" image and animates the "Canvas.Top" property from 600 to 0
Updated XAML:
<Canvas xmlns="https://schemas.microsoft.com/client/2007" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Name="root" Width="600" Height="400"> <Image Source="jungle.jpg"/> <Canvas Background="transparent"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard x:Name="translateArm"> <DoubleAnimation Storyboard.TargetName="toucan" Storyboard.TargetProperty="(Canvas.Top)" From="600" To="0" Duration="0:0:1"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Image x:Name="toucan" Source="toucan.jpg" Clip="…"/> …clip geometry removed for clarity </Canvas> </Canvas> |
Now when the page is loaded, the toucan slides in from the bottom! It's that easy! If you want to run the example (against February CTP release) just unpack the attached zip file.
Example of page running in IE7:
Till next time,
Gavin