Animate an image inside of a tooltip of a button

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>