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>
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.
I'm working on transitioning some code from silverlight to WPF, and my VisualStates are not working correctly.
I am using visualstatemanager to control the visibility of some text fields. I am not using any transitions to animate the change, I just want the fields to be collapsed in one state, then visible in another.
Xaml from silverlight:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LostPasswordStates">
<VisualState x:Name="LostPassword_Start">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="lbl_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(TextBox.IsReadOnly)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="False" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LostPassword_Success">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="lbl_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="btn_Reset" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
I get the following exception :
An unhandled exception of type 'System.Windows.Media.Animation.AnimationException' occurred in PresentationCore.dll
Additional information: Cannot animate the 'Visibility' property on a 'System.Windows.Controls.TextBox' using a 'System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames'. For details see the inner exception.
So my question to you is:
If I can't use a System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames for this, what should I be using?
This works for me, using .NET 4.5:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LostPasswordStates">
<VisualState x:Name="LostPassword_Start">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="lbl_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(TextBox.IsReadOnly)">
<DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LostPassword_Success">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="lbl_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="btn_Reset" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
There are two changes to your current code:
Instead of "Collapsed" and "Visible", the Value is set to "{x:Static Visibility.Collapsed}" and "{x:Static Visibility.Visible}";
The IsReadOnly property uses a BooleanAnimationUsingKeyFrames instead of an ObjectAnimationUsingKeyFrames;
You can only animate properties of numeric types (double). Visibility can not be animated because it is enum an there is no way to animate this meaningfull.
If you want to fadeout something you can use the opacity property.
I made a die for some game I'm making (in c#), it's a usercontrol which uses a storyboard to show several images after each other (like a slideshow) so it looks like a rolling 3D die. The problem is starting and stopping it at a specific keyFrame. It's seems logical to use Pause() and Resume() for this, but I can't figure out how to Pause at an exact keyFrame.
Some people use a seperate dispatcherTimer to do this, but this isn't precise enough to stop it at that exact keyframe. (for example, if you throw 4 it must stop on the 4 image).
So, it would be great if there was some method like this:
TimeSpan keyTime = new TimeSpan(0,0,0,0,750); // 750 miliseconds
myStoryBoard.ResumeTo(keyTime); // <- doesn't exist as far as I know
Here is a snippet from my storyboard in XAML:
<Storyboard x:Key="DieStoryBoard" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.05">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image2">
<DiscreteObjectKeyFrame KeyTime="0:0:0.05">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.10">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image3">
<DiscreteObjectKeyFrame KeyTime="0:0:0.10">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.15">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
.....
And some images to make things clearer:
try this...
my example is a rotating arrow,and I can stop it at a specified angle.
<Window.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).
(TransformGroup.Children)[2].(RotateTransform.Angle)"
Storyboard.TargetName="RightPanelButton1">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="45.0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="90.0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="135.0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="180.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
Storyboard st = ((Storyboard)this.Resources["Storyboard1"]);
st.Begin();
st.Seek(new TimeSpan(0,0,2));
st.Pause();
Abbas Ahmed