locked
Pause in XAML code at a KeyFrame using DoubleAnimationUsingKeyFrames RRS feed

  • Question

  • Hi,

    I want to give a pause of 5 seconds to my animation in XAML. Here is my endeavour.

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:6" Storyboard.TargetName="MyControl">
    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
    <LinearDoubleKeyFrame KeyTime="0:0:1" Value="1" />
    <LinearDoubleKeyFrame KeyTime="0:0:5" Value="1" />
    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
    </DoubleAnimationUsingKeyFrames>
    



    As you can see I am trying to keep "Opacity" value to 1 for 5 seconds and then change it back to 0. But this is not giving me desired results. It keeps the opacity value to 1 even after 5 seconds have elapsed. Any ideas where am I missing the trick? Thanks.


    Best Regards,

    Omer Javed

    Monday, June 11, 2012 1:40 AM

Answers

  • Hi try like this. after 5 sec the the opacity of rectangle will change. hope this is what you asking.

     <UserControl.Resources>
      <Storyboard x:Name="Storyboard1">
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:6" Value="0"/>
       </DoubleAnimationUsingKeyFrames>
      </Storyboard>
     </UserControl.Resources>

     <Grid x:Name="LayoutRoot" Background="White">
      <Rectangle x:Name="rectangle" Fill="#FF0000DC" HorizontalAlignment="Left" Height="87" Margin="105,144,0,0" Stroke="Black" VerticalAlignment="Top" Width="132"/>
     </Grid>

    Monday, June 11, 2012 2:11 AM
  • hi

    in below highlighted code insted of setting Keytime 0:0:0 you can change to 0:0:6. now your animation will work as expected. hope this helps you.

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:6" Storyboard.TargetName="MyControl">
    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
    <LinearDoubleKeyFrame KeyTime="0:0:1" Value="1" />
    <LinearDoubleKeyFrame KeyTime="0:0:5" Value="1" />
    <LinearDoubleKeyFrame KeyTime="0:0:6" Value="0" />
    </DoubleAnimationUsingKeyFrames>

    Monday, June 11, 2012 3:07 AM

All replies

  • Hi try like this. after 5 sec the the opacity of rectangle will change. hope this is what you asking.

     <UserControl.Resources>
      <Storyboard x:Name="Storyboard1">
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:6" Value="0"/>
       </DoubleAnimationUsingKeyFrames>
      </Storyboard>
     </UserControl.Resources>

     <Grid x:Name="LayoutRoot" Background="White">
      <Rectangle x:Name="rectangle" Fill="#FF0000DC" HorizontalAlignment="Left" Height="87" Margin="105,144,0,0" Stroke="Black" VerticalAlignment="Top" Width="132"/>
     </Grid>

    Monday, June 11, 2012 2:11 AM
  • Vijay,

    Thanks for your reply as it helped me achieve my goal. Could you please explain what  was missing in my code. 

    Best Regards,

    Omer Javed

    Monday, June 11, 2012 2:57 AM
  • hi

    in below highlighted code insted of setting Keytime 0:0:0 you can change to 0:0:6. now your animation will work as expected. hope this helps you.

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:6" Storyboard.TargetName="MyControl">
    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
    <LinearDoubleKeyFrame KeyTime="0:0:1" Value="1" />
    <LinearDoubleKeyFrame KeyTime="0:0:5" Value="1" />
    <LinearDoubleKeyFrame KeyTime="0:0:6" Value="0" />
    </DoubleAnimationUsingKeyFrames>

    Monday, June 11, 2012 3:07 AM
  • hello,

    Yes that is exactly what I did. Thanks again. 

    Best Regards,

    Omer Javed

    Monday, June 11, 2012 3:12 AM