locked
Storyboard inside a user control is not working

    Question

  • I am developing a Windows 8 Store App. I have created the following user control:

    <UserControl x:Class="RTV_W8.AnimatedImage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:RTV_W8" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <UserControl.Resources> <!-- Animates the rectangle's opacity. --> <Storyboard x:Name="ContainerGridStoryboard"> <DoubleAnimation Storyboard.TargetName="MainGrid" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:5" AutoReverse="False"> </DoubleAnimation> </Storyboard> </UserControl.Resources> <Grid x:Name="MainGrid" CacheMode="BitmapCache"> <Image Stretch="UniformToFill" x:Name="PictureImage"/> </Grid> </UserControl>

    with the following cs file

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236
    
    namespace RTV_W8
    {
        public sealed partial class AnimatedImage : UserControl
        {
            public AnimatedImage()
            {
                this.InitializeComponent();
                this.Loaded += AnimatedImage_Loaded;
                this.PictureImage.Loaded += PictureImage_Loaded;
            }
    
            void PictureImage_Loaded(object sender, RoutedEventArgs e)
            {
                this.ContainerGridStoryboard.Begin();
            }
    
            public ImageSource Source
            {
                get { return (ImageSource)GetValue(SourceProperty); }
                set { SetValue(SourceProperty, value); }
            }
    
            public static readonly DependencyProperty SourceProperty =
            DependencyProperty.Register(
                "Source",                  // The name of the DependencyProperty
                typeof(ImageSource),             // The type of the DependencyProperty
                typeof(AnimatedImage),       // The type of the owner of the DependencyProperty
                new PropertyMetadata(     // OnBlinkChanged will be called when Blink changes
                    false,                // The default value of the DependencyProperty
                    new PropertyChangedCallback(SourceChanged)
                )
            );
    
            private static void SourceChanged(
          DependencyObject d,
          DependencyPropertyChangedEventArgs e
      )
            {
                var instance = d as AnimatedImage;
                if (instance != null)
                {
                    instance.PictureImage.Source = e.NewValue as ImageSource;
                }
            }
        }
    }
    

    my problem is the storyboard is not launching when the image is loaded. This user control is used inside another usercontrol. I have tried multiple variants trying to make the animation to work, none of them worked. I want the user control to animate it's opacity into view, instead of just pooping up. Although i can see via breakpoints that the ContainerGridStoryboard.Begin(); is executed nothing happens on screen

    EDIT: In another usercontrol witch is later used in a datatemplate, if i apply the storyboard on the main grid it works, the usercontrol gets animated. But if i apply it on the second grid (contained in the main grid) or any other element, the animation does not work. That is why i created animatedimage in the first place.

    Monday, October 27, 2014 5:44 PM

Answers

  • Hi Ventura8 - I just posted this on your StackOverFlow post as well. When I give the AnimatedImage a source, the image fades into view as expected. I don't know if you're doing something wrong. Here's the code I'm using in my mainpage.XAML:

       <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <local:AnimatedImage x:Name="MyAnimatedImage" Width="400" Height="300" Source="Assets/kitten.jpg"/>
        </Grid>


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, October 27, 2014 7:25 PM
    Moderator
  • I have just solved the problem. So my usercontrol was inside a couple of grids, inside another usercontrol, inside a datatemplate inside a gridview. The problem was that the main grid witch contained the animatedimage was set with CacheMode="BitmapCache". When i removed that propriety the images faded in.
    Tuesday, October 28, 2014 10:39 AM

All replies

  • Hi Ventura8 - I just posted this on your StackOverFlow post as well. When I give the AnimatedImage a source, the image fades into view as expected. I don't know if you're doing something wrong. Here's the code I'm using in my mainpage.XAML:

       <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <local:AnimatedImage x:Name="MyAnimatedImage" Width="400" Height="300" Source="Assets/kitten.jpg"/>
        </Grid>


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, October 27, 2014 7:25 PM
    Moderator
  • Thanks for your swift reply. I have tested the control in a blank page and it works as expected. but if i put the control inside another control, inside a datatemplate, inside a gridview the animation will not fire. The image just pops up
    • Edited by ventura8 Tuesday, October 28, 2014 10:08 AM
    Tuesday, October 28, 2014 10:07 AM
  • I have just solved the problem. So my usercontrol was inside a couple of grids, inside another usercontrol, inside a datatemplate inside a gridview. The problem was that the main grid witch contained the animatedimage was set with CacheMode="BitmapCache". When i removed that propriety the images faded in.
    Tuesday, October 28, 2014 10:39 AM