The following forum(s) have migrated to Microsoft Q&A (Preview): Developing Universal Windows apps!
Visit Microsoft Q&A (Preview) to post new questions.

Learn More

 locked
[UWP] [Animations] Double Animation not firing when duration is not 0 RRS feed

  • Question

  • Hi,

    I am animating closing of a grid, I can do it with 

    changeHeight.Duration = new Duration(new TimeSpan(0));

    but when i use some other time frame the animation doesnt fire.

    for ex : changeHeight.Duration = new Duration(new TimeSpan(100));

    doesnt work. Am i missing anything?

    my code:

     

    Xaml:

    <UserControl.Resources>
                <Storyboard x:Name="myStoryboard">
                    <DoubleAnimation x:Name="changeHeight"
              Storyboard.TargetName="ContentGrid"
              Storyboard.TargetProperty="Height"/>
                </Storyboard>
        </UserControl.Resources>

    <Grid x:Name="ContentGrid" Height="200" Background="White" Padding="0,10"/>
                

    .cs

    changeHeight.From = ContentGrid.Height;
    changeHeight.To = 0;
    changeHeight.Duration = new Duration(new TimeSpan(0));
    myStoryboard.Begin();



    Prakhar Gupta

    Thursday, September 10, 2015 9:25 AM

Answers

  • Hi Prakhar,

    Not all custom animations you create can run by default in a Windows Runtime app, if the animation system determines that the animation might cause bad performance in your UI. Animations where the system determines there could be a performance impact are called dependent animations. It's dependent because the clocking of your animation is directly working against the UI thread, which is also where active user input and other updates are trying to apply the runtime changes to UI. A dependent animation that's consuming extensive system resources on the UI thread can make the app appear unresponsive in certain situations.

    If your animation causes a layout change or otherwise has the potential to impact performance on the UI thread, you often need to explicitly enable the animation to see it run. That's what the EnableDependentAnimation property on specific animation classes is for. See Dependent and independent animations for more info.

    So in your case, you can change your code as following:

    XAML

    <Storyboard x:Name="myStoryboard">
        <DoubleAnimation x:Name="changeHeight" Duration="0:0:1" EnableDependentAnimation="True" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Height" To="0" />
    </Storyboard>

    c#

    myStoryboard.Begin();

    Or you can just change your C# code like this:

    changeHeight.From = ContentGrid.Height;
    changeHeight.To = 0;
    changeHeight.Duration = new Duration(new TimeSpan(10000000));
    changeHeight.EnableDependentAnimation = true;
    myStoryboard.Begin();

    Notice that in constructor TimeSpan(long ticks), a single tick represents one hundred nanoseconds or one ten-millionth of a second. There are 10,000 ticks in a millisecond. For 1 second you should uses TimeSpan(10000000) or TimeSpan.FromSeconds(1).

    Hope this will be helpful.

    Regards,

    Jay

    Thursday, September 10, 2015 10:43 AM

All replies

  • Hi Prakhar,

    Not all custom animations you create can run by default in a Windows Runtime app, if the animation system determines that the animation might cause bad performance in your UI. Animations where the system determines there could be a performance impact are called dependent animations. It's dependent because the clocking of your animation is directly working against the UI thread, which is also where active user input and other updates are trying to apply the runtime changes to UI. A dependent animation that's consuming extensive system resources on the UI thread can make the app appear unresponsive in certain situations.

    If your animation causes a layout change or otherwise has the potential to impact performance on the UI thread, you often need to explicitly enable the animation to see it run. That's what the EnableDependentAnimation property on specific animation classes is for. See Dependent and independent animations for more info.

    So in your case, you can change your code as following:

    XAML

    <Storyboard x:Name="myStoryboard">
        <DoubleAnimation x:Name="changeHeight" Duration="0:0:1" EnableDependentAnimation="True" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Height" To="0" />
    </Storyboard>

    c#

    myStoryboard.Begin();

    Or you can just change your C# code like this:

    changeHeight.From = ContentGrid.Height;
    changeHeight.To = 0;
    changeHeight.Duration = new Duration(new TimeSpan(10000000));
    changeHeight.EnableDependentAnimation = true;
    myStoryboard.Begin();

    Notice that in constructor TimeSpan(long ticks), a single tick represents one hundred nanoseconds or one ten-millionth of a second. There are 10,000 ticks in a millisecond. For 1 second you should uses TimeSpan(10000000) or TimeSpan.FromSeconds(1).

    Hope this will be helpful.

    Regards,

    Jay

    Thursday, September 10, 2015 10:43 AM
  • I also had this problem a couple of times. Unfortunately, using EnableDependentAnimation = true, help sometimes, but not always. I can not tell what's the reason for that and in which scenarios it was working or not. But this following (ugly) workaround helped in my case:

    await Task.Delay(10); // add this line
    myStoryboard.Begin();
    When anyone is able to explain why this is solving the problem, please go for it... :)

    Saturday, December 19, 2015 3:12 PM
  • Still not working for my - this is my setup:

    <Storyboard x:Name="MainImageSlideOut">
                <DoubleAnimation Duration="0:0:1" To="0" 
                                     Storyboard.TargetProperty="Height" 
                                     Storyboard.TargetName="Grid" 
                                     EnableDependentAnimation="True"/>
    
    </Storyboard>
    
    ....
    
    <Grid Background="#171717">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
    
            <Grid Grid.Row="1" 
                  Height="250"
                  x:Name="Grid" 
                  Background="#202020" />            
    
            <ScrollViewer Grid.Row="2">
            ...
            </ScrollViewer>
    
    </Grid>
    

    Saturday, February 27, 2016 10:56 AM
  • Use MinHeight instead Height
    Wednesday, June 15, 2016 8:12 PM