Time Delay on Trigger

Question

I wish to attach a time delay to a mouseover event on a WPF expander I have on my form (xaml supported by VB.NET code behind). This mouseover event essentially triggers the expansion as oppose to clicking - but I'd like a short wait before the content is expanded. So far I have not managed to find anything to solve this via the wider internet.

The current xaml code to enable the trigger is:

    <Style x:Key="HoverExpander" TargetType="{x:Type Expander}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="IsExpanded" Value="True" />
            </Trigger>
        </Style.Triggers>
    </Style>

This style is then applied to:

<Expander Style="{StaticResource HoverExpander}" 
          HorizontalAlignment="Right"
          ExpandDirection="Left" 
          Height="Auto" 
          Width="Auto">
           <!-- Content here -->
</Expander>

Note that I've stripped out other aesthetics (such as borders, gridrefs etc for readability).

I think there should be some way to set a delay on the MouseOver Trigger but haven't had much luck finding it. This could either be set in xaml or perhaps as an event in the code behind.

I'm working on this currently, so when I find a solution I shall post it here. Grateful for any ideas meantime. Thanks!

Answer 1

Use an EventTrigger on the MouseOver event and a Storyboard with a BooleanAnimationUsingKeyFrames instead. In the Timeline of the Storyboard, you could have KeyFrames, so that the animation waits for some time before it affects the properties you want to change.

Answer 2

This was the code I settled on - based on the ideas already given:

    <Style x:Key="HoverExpander" TargetType="{x:Type Expander}">            
        <Style.Setters>                
            <Setter Property="IsExpanded" Value="False"/><!-- Initially collapsed -->            
        </Style.Setters>

        <Style.Triggers>
            <!-- Impose a short delay (500ms) before expanding control -->
            <EventTrigger RoutedEvent="Expander.MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <BooleanAnimationUsingKeyFrames
                            Storyboard.TargetProperty="IsExpanded"
                            Duration="0:0:0.5">
                            <DiscreteBooleanKeyFrame Value="True" KeyTime="100%"/><!-- I.E. after 500ms -->                             
                        </BooleanAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <!-- Collapse when mouse leaves control-->
            <EventTrigger RoutedEvent="Expander.MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <BooleanAnimationUsingKeyFrames
                            Storyboard.TargetProperty="IsExpanded"
                            Duration="0:0:0.1">
                            <DiscreteBooleanKeyFrame Value="False" KeyTime="0%"/><!-- I.E. Immediately -->

                        </BooleanAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>

Then apply as before. This was tested and works in .NET 4.0. Other neat tricks could be applied if you do so wish, I found the following to be quite helpful in getting ideas:

Animation Overview (MSDN)

Storyboards Overview (MSDN)