Animate an image inside of a tooltip of a button - wpf

Question

For the application I am working on, I need an animation.
The problem is, that the animation is in a tooltip.
So I have a button and whenever I move over the button the tooltip comes up. The tooltip shows a short information text (Textblock) and after about two seconds he shall expand and show an image.
Since I am an XAML-only developer, which means I have no clue about C# and therefore I have no idea about binding to a viewmodel, I am looking for a way to do this with triggers and storyboards.
I have already achieved that effect with an Event Trigger, who reacts to the Routed Event Loaded. The problem is, that this works "only" once, when the Tooltip is loaded the first time.
Here is my code:
<Button Width="100" Height="100">
<Button.ToolTip>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Here is some text!"></TextBlock>
<Image Grid.Row="1" Visibility="Collapsed" Source="MyPicture.png">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Duration="0"
BeginTime="0:0:2">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Grid>
</Button.ToolTip>
</Button>
Is there a better Routed Event than "Loaded" or do I have to make my own Routed Event? Can I link the Event to the Button, like "When Button IsMouseOver is true do this with the image"?
Or is there a complete better way?
Nevertheless, solutions regarding a way with C# are also welcomed.
Thanks for any advices,
Gerrit

Answer 1

A DataTrigger on the ToolTip's Visibility, with Enter and Exit actions should work. Note the explicit <ToolTip>...</ToolTip>
<Button Width="100" Height="100">
<Button.ToolTip>
<ToolTip>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Here is some text!"></TextBlock>
<Image Grid.Row="1" Visibility="Collapsed" Source="MyPicture.png">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding IsVisible, RelativeSource={RelativeSource AncestorType=ToolTip}}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Duration="0"
BeginTime="0:0:2">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Duration="0">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Grid>
</ToolTip>
</Button.ToolTip>
</Button>

Answer 2

Since you do not set the FillBehavior property in your animation, it is set to HoldEnd (i.e. the animation holds its value after it reaches the end of its active period). So you need just an "opposite" animation to reset the Visibility value:
<Image Grid.Row="1" Visibility="Collapsed" Source="MyPicture.png">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Duration="0"
BeginTime="0:0:2">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Unloaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Duration="0"
BeginTime="0:0:0">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
So the second animation will begin when the image is unloaded, has no duration and resets the Visibility value.