I have the following code:
<Storyboard x:Key="CounterStoryboard" >
<!-- Panel appear -->
<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="CounterPanel" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<!-- 3-->
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="CounterLabel3" From="1" To="0" Duration="0:0:1" BeginTime="0:0:0">
</DoubleAnimation>
<!-- 2 -->
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="CounterLabel2" From="0" To="1" Duration="0:0:0" BeginTime="0:0:1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="CounterLabel2" From="1" To="0" Duration="0:0:1" BeginTime="0:0:1">
</DoubleAnimation>
<!-- 1 -->
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="CounterLabel1" From="0" To="1" Duration="0:0:0" BeginTime="0:0:2">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="CounterLabel1" From="1" To="0" Duration="0:0:1" BeginTime="0:0:2">
</DoubleAnimation>
<!-- Panel disappear -->
<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="CounterPanel" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:3" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
This acts like a counter, from 3 to 1. Everything works fine, except from the last part. The Panel disappear is not working. It should make the panel invisible, but it's still there...
What I'm doing wrong?
NOTE: I call the storyboard like this:
sb = (Storyboard)FindResource("CounterStoryboard");
sb = sb.Clone();
sb.Completed += sb_Completed;
sb.Begin(this);
Your last animation has a Duration of 0:0:0 yet you set KeyTime to 0:0:3 which is beyond duration time. You can change KeyTime to 0:0:0 and set BeginTime to 0:0:3
<ObjectAnimationUsingKeyFrames Duration="0:0:0" BeginTime="0:0:3" Storyboard.TargetName="CounterPanel" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
Related
Please see this Storyboard:
<Storyboard x:Key="visibilityStoryboardn">
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="0:0:0.0" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2.0"/>
<DoubleAnimation BeginTime="0:0:10.0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2.0"/>
<ObjectAnimationUsingKeyFrames BeginTime="0:0:2" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
I try to change my element Visibility from Collapsed to Visible with duration of 2 seconds, then wait 10 seconds and change the Visibility back to Collapsed.
currently this do only the first thing, i mean this change my element to Visible with this 2 seconds duration but then start immediately to hide it back to Collapsed but now without and animation style.
I think your only problem is that you defined BeginTime="0:0:2" for your Collapsed keyframe. It should be BeginTime="0:0:12"
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:12.0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="0:0:0.0" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2.0"/>
<DoubleAnimation BeginTime="0:0:10.0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2.0"/>
So i have this Grid:
<Grid x:Name="notificarionGrid" Visibility="Collapsed"/>
And i want to change its Visibility value with animation, so i have this 2 Storyboard:
<Storyboard x:Key="fadeIn">
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="0:0:0.0" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2.0"/>
</Storyboard>
<Storyboard x:Key="fadeOut">
<DoubleAnimation BeginTime="0:0:0:0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2.0"/>
</Storyboard>
Now this code works fine but the only problem here is that after the fadeOut my Grid Visibility become Hidden instead of Collapsed what cause some elements become not responsible under this Grid.
Any idea how to switch my Grid again to Collapsed ?
You could handle the Completed event for the Storyboard:
private void Storyboard_Completed(object sender, EventArgs e)
{
notificarionGrid.Visibility = Visibility.Collapsed;
}
XAML:
<Storyboard x:Key="fadeOut" Completed="Storyboard_Completed">
<DoubleAnimation BeginTime="0:0:0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2.0"/>
</Storyboard>
Or add an ObjectAnimationUsingKeyFrames to your Storyboard:
<Storyboard x:Key="fadeOut">
<DoubleAnimation BeginTime="0:0:0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2.0"/>
<ObjectAnimationUsingKeyFrames BeginTime="0:0:2" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
Add another ObjectAnimationUsingKeyFrames for the Visibility with an appropriate BeginTime:
<Storyboard x:Key="fadeOut">
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0" Duration="0:0:2"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
BeginTime="0:0:2">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
So i have this Grid:
<Grid x:Name="notificarionGrid" Visibility="Hidden"/>
And i want to change its Visibility value with animation, so i have this 2 Storyboard:
<Storyboard x:Key="fadeIn">
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="0:0:0.0" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2.0"/>
</Storyboard>
<Storyboard x:Key="fadeOut">
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2.0"/>
</Storyboard>
Code behind:
FADE IN
Storyboard storyboard = Resources["fadeIn"] as Storyboard;
storyboard.Begin(notificarionGrid);
FADE OUT
Storyboard storyboard = Resources["fadeOut"] as Storyboard;
storyboard.Begin(notificarionGrid);
The only problem is that in fade out the Grid is disappear immediately not like fade in that takes 2 seconds.
What i am doing wrong ?
Remove the ObjectAnimationUsingKeyFrames that sets the Visibility property to Hidden from the Storyboard:
<Storyboard x:Key="fadeOut">
<DoubleAnimation BeginTime="0:0:0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2.0"/>
</Storyboard>
If you hide the element before you animate its Opacity property, you won't be able to see the fade out animation.
Here's what I'm trying to do:
Make control1 Visible, make control2 Collapsed, animate opacity from 1 to 0 on control 1 over .8 seconds.
immediately after that is done, do this:
Make control1 Collapsed, make control2 Visible, animate opacity from 0 to 1 on control2 over .8 seconds.
I just can't get it to be fluid and I'm out ideas. here's what I have:
<Storyboard x:Key="sb">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.8000000" Storyboard.TargetName="MainTabControl" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.8000000" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.8000000" Storyboard.TargetName="MainTabControl" Storyboard.TargetProperty="(UIElement.Opacity)">
<LinearDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<LinearDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00.8000000" Duration="00:00:00.8000000" Storyboard.TargetName="SearchProjectsView" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.8000000" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8000000" Duration="00:00:00.8000000" Storyboard.TargetName="SearchProjectsView" Storyboard.TargetProperty="(UIElement.Opacity)">
<LinearDoubleKeyFrame KeyTime="00:00:00.0000000" Value="0"/>
<LinearDoubleKeyFrame KeyTime="00:00:00.8000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
It isn't clear from your question why you would animate the Opacity and Visbility at the same time, but your problem is that the animation of the Visibility of the second control should start immediately, not after 0.8 seconds.
This should work:
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="MainTabControl" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="SearchProjectsView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
Storyboard.TargetName="MainTabControl" Storyboard.TargetProperty="Opacity"
From="1" To="0" Duration="0:0:0.8"/>
<DoubleAnimation
Storyboard.TargetName="SearchProjectsView" Storyboard.TargetProperty="Opacity"
From="0" To="1" BeginTime="0:0:0.8" Duration="0:0:0.8"/>
</Storyboard>
I have a DoubleAnimation for a waiting control and it repeats forever. But I want to set time between every repeats. How can I do that?
My animation is:
<DoubleAnimation Storyboard.TargetName="rect1"
Storyboard.TargetProperty="Height"
To="10" BeginTime="0:0:0" Duration="0:0:0.3"
AutoReverse="True" RepeatBehavior="Forever"/>
Set a Duration on the enclosing Storyboard:
<Storyboard AutoReverse="True" RepeatBehavior="Forever" Duration="0:0:1">
<DoubleAnimation Storyboard.TargetName="rect1"
Storyboard.TargetProperty="Height"
To="10" Duration="0:0:0.3"/>
</Storyboard>