The other day I wanted to animate a clipping area. The answer is to define the Clip property of an object with RectangleGeometry or EllipseGeometry and then animate properties on the geometry.
The below example shows a RectangleGeometry clipping area being moved over an image. In the MouseMove event, I am setting the values of RectangleGeometry’s TranslateTransform property.
The XAML
- The clipping area of the Image is defined within the <Image.Clip> property
- Values in the Rect attribute of the RectangleGeometry are PositionX, PositionY, Widht, Height. In this case the clipping area is in the middle of the image
- A TranslateTransform is defined for the RectangleGeometry.Transform. To make it easy to reference from the code, make sure to define a value for the x:Name attribute.
The Code
- In the MouseMove event reset the value for the Rect if the Left and Top values are not zero.
- Then set the values for the TranslateTransform.
The Example
http://www.85turns.com/silverlight/AnimateClippingGeometry.html
January 13th, 2009 at 2:51 am
[...] Animating clipping area in Silverlight [...]
January 17th, 2009 at 10:31 pm
thats an airpot photo of the juan santamaria airport?
January 19th, 2009 at 11:23 am
gustavo, that is the Juan Santamaria airport in Costa Rica. It’s amazing to see the rain covering the mountain. Here is the full picture: http://www.85turns.com/pictures/2008/CostaRicaTechSummit/large-33.html
March 25th, 2009 at 12:59 pm
first of all, that’s not animation, that’s a simple mouse track.
To animate you have to use a PathSegment and name each linesegment, then use a pointAnimation.