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.
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>
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>
In WPF, I'm trying to move an image from left to center, pause for a second, then move the image to the right.
I'm trying to achieve it using ObjectAnimationUsingKeyFrames.
<BeginStoryboard>
<Storyboard Storyboard.TargetName="RoundNumberText" >
<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="Left">
<DiscreteObjectKeyFrame Value="400" KeyTime="0:0:0.5"/>
<DiscreteObjectKeyFrame Value="1400" KeyTime="0:0:1.5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
Somehow i got the error message on the TargetProperty that the object does not supported by this properties. I've tried with margin as well, but still giving error.
Appreciate if anyone could help.
To set the value for alignment, you need to do something like this:
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyImage"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Center</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
Below is my example, where the image appears in the role of the Label:
<Grid>
<Grid.Triggers>
<EventTrigger SourceName="MoveToCenter" RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Test"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Center</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0:0:1"
Storyboard.TargetName="Test"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Right</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Label x:Name="Test" Content="Test" Width="300" Height="200" Background="Aqua" HorizontalAlignment="Left" />
<Button Name="MoveToCenter" Content="MoveToCenter" Width="120" Height="30" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Grid>
I want to change the source of an image using storyboard in silverlight blend on mouse over:
<VisualState x:Name="MouseOver">
<Storyboard>
---code here--
</Storyboard>
</VisualState>
Ok finally solved it :
On mouse hover i just turn out the visbility of an image to colapsed and made the visibility of other image to visible. That's it :)
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor">
<SplineDoubleKeyFrame KeyTime="0" Value=".35"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="hoverimage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>