none
BeginTime in DoubleAnimation ignored

    Question

  • I created control which part is fading in/out when control hovered. It is made by changing Height of canvas and opacity of its content. Height is changed to 0.0 so it does not react on nonvisible part of control. I have one problem. Storyboard for hideing contains 2 DoubleAnimations (one for Opacity, one for Height). The one for changing Height has set BeginTime, but it is ignored.

    Storyboard:

            <Storyboard x:Name="m_animMenuHide">
                <DoubleAnimation 
                    Storyboard.TargetName="m_qualityMenu"
                    Storyboard.TargetProperty="Opacity"
                    From="1.0" To="0.0" Duration="0:0:5"/>
                <DoubleAnimation x:Name="m_animTopHide"
                    Storyboard.TargetName="m_clip"
                    Storyboard.TargetProperty=""
                    To="0" Duration="0:0:0.01" BeginTime="0:0:5.1" />
            </Storyboard>

    Control:

        <Grid x:Name="LayoutRoot" VerticalAlignment="Bottom">
            <Canvas x:Name="m_clip" Canvas.ZIndex="1" Margin="0,0,0,29" Height="90">
                <Border x:Name="m_qualityMenu" Width="50" Opacity="0.0">
                    <Border.Background>
                        <ImageBrush ImageSource="/player;component/Images/QualityPicker_bg.png" Stretch="UniformToFill" AlignmentY="Bottom"/>
                    </Border.Background>
                    <StackPanel x:Name="m_allQualities" Margin="0,0,0,10">
                        <Button x:Name="m_btnQualityHD" Template="{StaticResource QualHDTemplate}" Content="HD" Click="QualityButtonClick" IsTabStop="False" VerticalAlignment="Bottom" />
                        <Button x:Name="m_btnQualityHQ" Template="{StaticResource QualHQTemplate}" Content="EXTR" Click="QualityButtonClick" IsTabStop="False" VerticalAlignment="Bottom" />
                        <Button x:Name="m_btnQualityMQ" Template="{StaticResource QualMQTemplate}" Content="STD" Click="QualityButtonClick" IsTabStop="False" VerticalAlignment="Bottom" />
                        <Button x:Name="m_btnQualityLQ" Template="{StaticResource QualLQTemplate}" Content="ECO" Click="QualityButtonClick" IsTabStop="False" VerticalAlignment="Bottom" />
                    </StackPanel>
                </Border>
            </Canvas>
            <Button x:Name="m_butCurrentQuality" Height="36" Content="" Margin="0"
                    Template="{StaticResource CurLQTemplate}" IsTabStop="False" VerticalAlignment="Bottom" />
        </Grid>

    I have no idea how does it happens...

    Tuesday, January 10, 2012 11:03 AM

Answers

  • Hi Eloar,

    According to my research, if you use the default background for Canvas(it is white) the animation for the Height of the canvas is invisible, you can set the background to another color for test.

    If you want to let the height of whole border to "0" during the animation, you can try the code below:

     <UserControl.Resources>
            <Storyboard x:Name="m_animMenuHide">
      <!--to test the second animation, you should comment out the first one for test-->
    
                <!--<DoubleAnimation  
                    Storyboard.TargetName="m_qualityMenu" 
                    Storyboard.TargetProperty="Opacity" 
                    From="1.0" To="0.0" Duration="0:0:5" />-->
                <DoubleAnimation x:Name="m_animTopHide" 
                    Storyboard.TargetName="m_qualityMenu" 
                    Storyboard.TargetProperty="Height" From="100"                 To="0" Duration="0:0:0.01" BeginTime="0:0:5.1" />
    
            </Storyboard>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">   
            <Canvas x:Name="m_clip" Canvas.ZIndex="1" Margin="0,0,0,29" Height="120" Background="Azure">           
                <Border x:Name="m_qualityMenu" Width="50" Opacity="1.0" Height="100">              
                    <Border.Background>
                        <ImageBrush ImageSource="Images/1.jpg" Stretch="UniformToFill" AlignmentY="Bottom"/>
                    </Border.Background>
                    <StackPanel x:Name="m_allQualities" Margin="0,0,0,10" >                
                        <Button x:Name="m_btnQualityHD"   Content="HD" IsTabStop="False" VerticalAlignment="Bottom" />
                        <Button x:Name="m_btnQualityHQ"  Content="EXTR"  IsTabStop="False" VerticalAlignment="Bottom" />
                        <Button x:Name="m_btnQualityMQ"  Content="STD"  IsTabStop="False" VerticalAlignment="Bottom" />
                        <Button x:Name="m_btnQualityLQ"  Content="ECO" IsTabStop="False" VerticalAlignment="Bottom" />
                    </StackPanel>
                </Border>
            </Canvas>
            <Button x:Name="m_butCurrentQuality" Height="36" Content="" Margin="122,0,212,0" 
                     IsTabStop="False" VerticalAlignment="Bottom" Click="m_butCurrentQuality_Click" />
    
        </Grid>
    
    private void m_butCurrentQuality_Click(object sender, RoutedEventArgs e)
            {
                m_animMenuHide.Begin();
            }

    Best Regards,

    Wednesday, January 11, 2012 9:52 PM

All replies

  • Try out this way:

    myKeyAnimation.Add(New DoubleAnimationUsingKeyFrames)
    
    myKeyAnimation(I).Duration = TimeSpan.FromSeconds(thisLight.LightTime(thisLight.Pattern.Count - 1))
    
    For J As Integer = 0 To thisLight.Pattern.Count - 1 Step 2
    
        myKeyAnimation(I).KeyFrames.Add(New DiscreteDoubleKeyFrame(0, TimeSpan.FromSeconds(thisLight.LightTime(J)))) 'Turnoff point (on duration)
    
        myKeyAnimation(I).KeyFrames.Add(New DiscreteDoubleKeyFrame(1, TimeSpan.FromSeconds(thisLight.LightTime(J + 1)))) 'Turnon point (end)
    
    Next J
    
    myKeyAnimation(I).RepeatBehavior = RepeatBehavior.Forever
    
    myKeyAnimation(I).BeginTime = New TimeSpan(I * 123456)
    'myKeyAnimation(I).BeginTime =New TimeSpan(Rand.Next(1000000, 9999999))
    'Add this animation to the storyboard
    
    myStoryBoard.Children.Add(myKeyAnimation(I))
    Tuesday, January 10, 2012 1:36 PM
  • Hi Eloar,

    According to my research, if you use the default background for Canvas(it is white) the animation for the Height of the canvas is invisible, you can set the background to another color for test.

    If you want to let the height of whole border to "0" during the animation, you can try the code below:

     <UserControl.Resources>
            <Storyboard x:Name="m_animMenuHide">
      <!--to test the second animation, you should comment out the first one for test-->
    
                <!--<DoubleAnimation  
                    Storyboard.TargetName="m_qualityMenu" 
                    Storyboard.TargetProperty="Opacity" 
                    From="1.0" To="0.0" Duration="0:0:5" />-->
                <DoubleAnimation x:Name="m_animTopHide" 
                    Storyboard.TargetName="m_qualityMenu" 
                    Storyboard.TargetProperty="Height" From="100"                 To="0" Duration="0:0:0.01" BeginTime="0:0:5.1" />
    
            </Storyboard>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">   
            <Canvas x:Name="m_clip" Canvas.ZIndex="1" Margin="0,0,0,29" Height="120" Background="Azure">           
                <Border x:Name="m_qualityMenu" Width="50" Opacity="1.0" Height="100">              
                    <Border.Background>
                        <ImageBrush ImageSource="Images/1.jpg" Stretch="UniformToFill" AlignmentY="Bottom"/>
                    </Border.Background>
                    <StackPanel x:Name="m_allQualities" Margin="0,0,0,10" >                
                        <Button x:Name="m_btnQualityHD"   Content="HD" IsTabStop="False" VerticalAlignment="Bottom" />
                        <Button x:Name="m_btnQualityHQ"  Content="EXTR"  IsTabStop="False" VerticalAlignment="Bottom" />
                        <Button x:Name="m_btnQualityMQ"  Content="STD"  IsTabStop="False" VerticalAlignment="Bottom" />
                        <Button x:Name="m_btnQualityLQ"  Content="ECO" IsTabStop="False" VerticalAlignment="Bottom" />
                    </StackPanel>
                </Border>
            </Canvas>
            <Button x:Name="m_butCurrentQuality" Height="36" Content="" Margin="122,0,212,0" 
                     IsTabStop="False" VerticalAlignment="Bottom" Click="m_butCurrentQuality_Click" />
    
        </Grid>
    
    private void m_butCurrentQuality_Click(object sender, RoutedEventArgs e)
            {
                m_animMenuHide.Begin();
            }

    Best Regards,

    Wednesday, January 11, 2012 9:52 PM