UIElement.Clip not being respected

Jan 2, 2011 at 12:48 AM


I'm building a platform leveler game and as part of this when my character moves it animates a moving motion (i.e. walking).

This is typically achieved in silverlight by having a sprite image (e.g. http://www.fragile-minds.com/crashnbass/fs-sprites/commanderkeen4_items_and_enemies.gif) and using a clip to select a subset of the image (typically the initial pose of a character) and then the clips left property is manipulated to give the effect of animation.

Currently i'm having a problem where the clip is respected at design time and initially when shown on the screen, but when the object is added to the 'physics world' the clip is being disregarded and the whole image (including all the animation steps) is added instead of just the clip that i'd expect.

Has anyone got this working? If so are there any examples of this? I can only find examples of primative shapes being used such as a circle, not an image.

FYI here's a sample clip.  I can provide full code if it'd be helpful

            <RectangleGeometry Rect="30,40,40,40"/>

Thanks in advance


Jan 2, 2011 at 12:43 PM

You could try putting the Image into a Canvas, and set the height and width of the Canvas to the Clipped (1 frame) size.

Then apply the PhysicsObjectBehavior to the Canvas instead of the Image. Note that you may need to add a Path or other element to use as a BoundaryElement on the PhysicsObjectBehavior because the boundary may not be determined correctly from the clipped image.


Jan 3, 2011 at 3:47 AM

Hi Andy,

Thanks for your suggestion - I've got the canvas displaying the correct size now but am unsure as how to implement the Path to set the Boundary for the 'single framed image'

Could you please provide some sample code?

Here's my attempt (but only on a single image as I wanted to keep it simple)

     <Canvas x:Name="LayoutRoot">
        <Canvas x:Name="cnvAlien" Height="50" Width="50" Canvas.Left="19" Canvas.Top="17">
                <pb:PhysicsObjectBehavior BoundaryElement="TestPath"/>
            <Image Canvas.Left="0" Canvas.Top="0" Height="50" Name="image1" Stretch="Fill" Width="50" Source="/SilverlightApplication9;component/ALIEN_01_01.png"/>
            <Path x:Name="TestPath" Stroke="Black"  Data="M 10,10 L 10,50 L 50,50 L 50,10" />


Thanks again!