How to create a fade-in animation for a newly created control in C# UWP

Question

So, simple question but I can't figure it out right now. In my C# XAML UWP app I am loading a series of photos. I'm wanting to animate a fade-in for each newly created photo. The photo objects are created in the code-behind as follows.

//getting the photos into the scroller
foreach (StorageFile current_file in GlobalVars.glo_lst_image_files)
{
    Image current_image = new Image();
    BitmapImage current_bitmapimage = new BitmapImage();
    await current_bitmapimage.SetSourceAsync(await current_file.OpenAsync(FileAccessMode.Read));
    current_bitmapimage.DecodePixelWidth = image_width;
    current_image.Source = current_bitmapimage;
    current_image.Width = image_width;

    current_image.Style = App.Current.Resources["ImagePhotoScroller"] as Style;
    current_image.Loaded += new RoutedEventHandler(OnPhotoScrollerImageLoad);

    stack_photoscroller.Children.Add(current_image);
}

The idea is that OnPhotoScrollerImageLoad will start a fade-in storyboard on the photo's Loaded event. How to accomplish this is where I'm having difficulty. I've tried a few things.

I've tried to create the entire animation in C# as follows.

private void OnPhotoScrollerImageLoad(object sender, RoutedEventArgs e)
{
    var storyboard = new Storyboard();
    var doubleAnimation = new DoubleAnimation();
    doubleAnimation.Duration = TimeSpan.FromMilliseconds(1000);
    doubleAnimation.EnableDependentAnimation = true;
    doubleAnimation.From = 0;
    doubleAnimation.To = 1;

    Storyboard.SetTargetProperty(doubleAnimation, "Opacity");
    Storyboard.SetTarget(doubleAnimation, sender);
    storyboard.Children.Add(doubleAnimation);
    storyboard.Begin();
}

I was unable to get the target right. I would get an error when using sender. In my previous apps I would only animate pre-existing objects which were named in XAML. I am unsure how to correctly set this parameter.

I also tried to make the animation in XAML as follows.

<Storyboard x:Name="PhotoScrollerImageLoadFade">
    <DoubleAnimation x:Name="PhotoScrollerImageLoadFade_dblanim" 
                        Storyboard.TargetProperty="Opacity"
                        From="0" To="1" 
                        Duration="0:0:1"/>
</Storyboard>

and then set the target in C#

private void OnPhotoScrollerImageLoad(object sender, RoutedEventArgs e)
{
    Storyboard.SetTarget(PhotoScrollerImageLoadFade_dblanim, sender);
    PhotoScrollerImageLoadFade.Begin();
}

But again, the sender isn't working. How should I achieve this?

Which error? Did you try using casting `(DependencyObject)sender` ? — Sinatr, Mar 15 '18 at 16:03
@Sinatr I guess I should have included, it was "cannot convert from 'object' to 'Windows.UI.Xaml.DependencyObject'". Your solution worked perfectly. I knew it was gonna be something simple. If you write a proper solution I could mark yours as correct. — Graham, Mar 15 '18 at 17:14

score 0 · Answer 1 · answered Mar 16 '18 at 08:28

cannot convert from 'object' to 'Windows.UI.Xaml.DependencyObject

All events have sender parameter defined as object (do not ask me why).

In Loaded event sender is FrameworkElement. Storyboard.SetTarget require DependencyObject, so you can simply cast sender to it (FrameworkElement inherits from DependencyObject):

Storyboard.SetTarget(someTimeline, (DependencyObject)sender);

How to create a fade-in animation for a newly created control in C# UWP

1 Answers1