Nice example of XAML use for Avalon aka WPF

Adam Nathan has a nice example of the use of animation for a property using XAML. And it's a funny post to read as well.

Two pictures of Jim Miller (one of the CLR architects) are stacked on top of each other. The animation changes the value of the opacity of the upper image from 1 (completely opaque) to 0 (completely transparant) and back again. Because the subject of the two images is the same and the two image are lined up, this gives a nice morphing effect.

I wanted to try this myself, so I searched my image archive for two similar looking photographs. I found two, but lining them up was more work than I expected. In PhotoShop I had to adjust for subtle differences in focal length, rotation, aspect ratio etc. Plus one of the photographs is one and a half year older than the other one, so the trees have grown 😉 You can see the result below.

 

To see the morph between these two pictures, paste this code into XAMLPAD

<?xml version="1.0" encoding="utf-8" ?>
<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005">
<Grid.Storyboards>
<SetterTimeline TargetName="kerckebosch2" Path="(Image.Opacity)" AutoReverse="true" RepeatBehavior="Forever">
<DoubleAnimation From="1" To="0" Duration="0:0:4" />
</SetterTimeline>
</Grid.Storyboards>
<Image Name="kerckebosch1" Source="http://bloggingabout.net/wp-content/uploads/sites/4/2014/01/kerckebosch1.jpg"/>
<Image Name="kerckebosch2" Source="http://bloggingabout.net/wp-content/uploads/sites/4/2014/01/kerckebosch2.jpg"/>
</Grid>

Leave a Reply

Your email address will not be published. Required fields are marked *