CODEWITHSUNDEEP
c#wpfxamlstylesstoryboard
André Silva
André Silva

Reputation: 1171

DoubleAnimation Height not returning to original value after trigger event is not being triggered anymore

I'm trying to put some styling in my listbox, when the listbox is created it has the size for one item and when the mouse is over, it should increase its height to fit 5 items, so far so good, but since it becomes annoying when the user pass the mouse over it to go to another field, it gets annoying seeing it growing and returning to its original size.

So I decided to try Storyboards with DoubleAnimation for this ListBox. I reached this:

    <Style TargetType="ListBox">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Height" Value="20" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard BeginTime="0:0:.25">
                            <DoubleAnimation Storyboard.TargetProperty="Height" From="20" To="85" Duration="0:0:0"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
            </Trigger>
        </Style.Triggers>
    </Style>

Ok, that works. Perfect, I'm almost feeling pro already. But when I went for the tests, I got problems. When the mouse is not over anymore, the listbox won't go backto its original size. So I decided to do the opposite and try to use Property="IsMouseOver" Value="False" with the From and To values switched. The ListBox wouldn't move.

So I tried an answer I saw in StackOverflow saying about DataTemplate.Triggers but got the same result.

I don't know what else to try since my lackof knowledge in WPF gets in the way everytime.

What is a good alternative for this? Thanks in advance and opinons are always welcome.

Upvotes: 0

Views: 470

Answers (1)

LPL
LPL

Reputation: 17083

Use an additional returning Storyboard in Trigger.ExitActions

<Trigger.ExitActions>
    <BeginStoryboard>
        <Storyboard BeginTime="0:0:.25">
            <DoubleAnimation Storyboard.TargetProperty="Height"
                             From="85" To="20" Duration="0:0:0"/>
        </Storyboard>
    </BeginStoryboard>
</Trigger.ExitActions>

Without that the Storyboard holds the value by default. See FillBehavior Property.

Alternatively you could set FillBehavior="Stop" and set the new Height value if IsMouseOver is true like you do for ScrollViewer.VerticalScrollBarVisibility.

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Trigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Height" From="20" To="85"
                                     Duration="0:0:0.5" FillBehavior="Stop" />
                </Storyboard>
            </BeginStoryboard>
        </Trigger.EnterActions>
        <Setter Property="Height" Value="85" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    </Trigger>
</Style.Triggers>

Upvotes: 2

Related Questions