CODEWITHSUNDEEP
c#xamlwindows-phone-7windows-phone-8
maxim bazhanov
maxim bazhanov

Reputation: 39

Image animation when it's loaded

I have the listbox with Image control and with binding source.

What i want: when image is loaded (i think it's ImageOpened event?), animate opacity property from 0 to 100. Som apps, like Facebook, use this effect.

Image control is inside DataTemplate and there are a lot of listbox items.

How to solve?

P.S. I tried to create Trigger for Image control that changes opacity property after ImageOpened event, but app crushed without any showed causes in debugger.

Upvotes: 1

Views: 1646

Answers (2)

Abdallah Shakhatreh
Abdallah Shakhatreh

Reputation: 770

DataTemplate :

<DataTemplate>
<Image Source="{Binding}" Opacity="0" ImageOpened="image_ImageOpened"/>
</DataTemplate>

Image animation :

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="Storyboard1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

ImageOpened handler :

 private void image_ImageOpened(object sender, System.Windows.RoutedEventArgs e)
 {
     Storyboard1.Begin();
 }

Upvotes: 2

Clemens
Clemens

Reputation: 128061

You may initially set the Image Opacity to zero and attach an ImageOpened handler that animates the Opacity to one.

<DataTemplate>
    <Image Source="{Binding}" Opacity="0" ImageOpened="OnImageOpened"/>
</DataTemplate>

The ImageOpened handler:

private void OnImageOpened(object sender, RoutedEventArgs e)
{
    var opacityAnimation = new DoubleAnimation
    {
        To = 1,
        Duration = TimeSpan.FromSeconds(1)
    };

    Storyboard.SetTarget(opacityAnimation, (DependencyObject)sender);
    Storyboard.SetTargetProperty(opacityAnimation,
                                 new PropertyPath(Image.OpacityProperty));

    var storyboard = new Storyboard();
    storyboard.Children.Add(opacityAnimation);
    storyboard.Begin();
}

Upvotes: 1

Related Questions