Image animation problem in silverlight
- by Jak
Hi followed " http://www.switchonthecode.com/tutorials/silverlight-3-tutorial-planeprojection-and-perspective-3d#comment-4688 ".. the animation is working fine. I am new to silver light. when i use dynamic image from xml instead of static image as in tutorial,.. it is not working fine, please help me on this. i used list box.. for this animation effect do i need to change listbox to some other arrangement ? if your answer yes means, pls give me some sample code. Thanks in advance.
Xaml code:
<ListBox Name="listBox1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding imgurl}" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" MouseLeftButtonUp="FlipImage" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My C# code:
//getting image URL from xml
XElement xmlads = XElement.Parse(e.Result);
//i bind the url in to listBox
listBox1.ItemsSource = from ads in xmlads.Descendants("ad")
select new zestItem
{
imgurl = ads.Element("picture").Value
};
public class zestItem
{
public string imgurl { get; set; }
}
private int _zIndex = 10;
private void FlipImage(object sender, MouseButtonEventArgs e)
{
Image image = sender as Image;
// Make sure the image is on top of all other images.
image.SetValue(Canvas.ZIndexProperty, _zIndex++);
// Create the storyboard.
Storyboard flip = new Storyboard();
// Create animation and set the duration to 1 second.
DoubleAnimation animation = new DoubleAnimation()
{
Duration = new TimeSpan(0, 0, 1)
};
// Add the animation to the storyboard.
flip.Children.Add(animation);
// Create a projection for the image if it doesn't have one.
if (image.Projection == null)
{
// Set the center of rotation to -0.01, which will put a little space
// between the images when they're flipped.
image.Projection = new PlaneProjection()
{
CenterOfRotationX = -0.01
};
}
PlaneProjection projection = image.Projection as PlaneProjection;
// Set the from and to properties based on the current flip direction of
// the image.
if (projection.RotationY == 0)
{
animation.To = 180;
}
else
{
animation.From = 180;
animation.To = 0;
}
// Tell the animation to animation the image's PlaneProjection object.
Storyboard.SetTarget(animation, projection);
// Tell the animation to animation the RotationYProperty.
Storyboard.SetTargetProperty(animation,
new PropertyPath(PlaneProjection.RotationYProperty));
flip.Begin();
}
