One-step learning of Silverlight 2 series (32): Image and image synthesis instance-"King of Kung Fu" stills playback

Overview

The release of Silverlight 2 Beta 1 brings us a lot of surprises from Runtime and Tools, such as supporting the framework languages Visual Basic, Visual C #, IronRuby, Ironpython, A series of new features such as JSON, Web Service, WCF, and Sockets support. The article "one-step learning Silverlight 2 series" takes you to Silverlight 2 development quickly from the following aspects: Silverlight 2 basic knowledge, data and communication, custom controls, animation, and graphic images.

In this article, we will implement a graphic image instance-image playback, and use Storyboard to achieve some animation effects.

Today, I am also a title speaker :), which is actually a simple image player. It has nothing to do with the stills of "The King of Kung Fu, I found several stills of the upcoming movie "King of Kung Fu" on the Internet as an example.

Effect

The final result is as follows:

Click play on the left or right side of the picture

In another example

Main Implementation

When you click, the Source attribute of the image is dynamically changed:

void Play(){    currentImg.Source = new BitmapImage(new Uri(index.ToString() + ".png", UriKind.Relative));    int left = index == MIN ? MAX : index - 1;    leftImg.Source = new BitmapImage(new Uri(left.ToString() + ".png", UriKind.Relative));    int right = index == MAX ? MIN : index + 1;    rightImg.Source = new BitmapImage(new Uri(right.ToString() + ".png", UriKind.Relative));}

And use Storyboard to change some Transform values to achieve the animation effect:

<Canvas.Resources>    <Storyboard x:Name="myStoryboard">        <DoubleAnimation  Storyboard.TargetName="myTransform"  Storyboard.TargetProperty="AngleY"  From="0" To="180" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="leftScaleTransform"  Storyboard.TargetProperty="ScaleX"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="leftScaleTransform"  Storyboard.TargetProperty="ScaleY"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="rightScaleTransform"  Storyboard.TargetProperty="ScaleX"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="rightScaleTransform"  Storyboard.TargetProperty="ScaleY"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>    </Storyboard></Canvas.Resources

You can download the complete sample code from here.

Conclusion

This article implements a simple image player and uses Storyboard to implement some animation effects.