Share via

Silverlight how-to: Sliding in an image with clip geometry using xaml

  • Article

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

beginning_animations.zip

Comments

  • Anonymous
    September 26, 2007
    Sorry for posting this message twice by I think my question fit this silver light section more.. So that any way to get the image cliping geometry of silver light image in c# and override with that data other image clipping properties ?