Playing the animation after "FrameworkElement.Loaded" and before "Unloaded" (in ListBoxItem)

Question

I have ListBox:

<ListBox x:Name="ListBoxImages"
         ScrollViewer.CanContentScroll="True"
         UseLayoutRounding="False"
         SelectionMode="Extended"/>

ListBox style:

<Style TargetType="{x:Type ListBox}">
        ...
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Border Name="Border">
                        <ScrollViewer Focusable="false">
                            <WrapPanel ItemWidth="100"
                                       IsItemsHost="True"/>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

and ListBoxItem style (animation here, sorry for long code):

<Style TargetType="{x:Type ListBoxItem}">
       <!--...-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="border"
                            RenderTransformOrigin="0.5,0.5">
                        <Border.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform x:Name="ScaleTransform"/>
                            </TransformGroup>
                        </Border.RenderTransform>
                        <ContentPresenter/>
                    </Border>

                        <!--Animation-->

                        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ScaleTransform"
                                                     Storyboard.TargetProperty="ScaleX"
                                                     Duration="0:0:0.1"
                                                     From="0" To="1"/>
                                    <DoubleAnimation Storyboard.TargetName="ScaleTransform"
                                                     Storyboard.TargetProperty="ScaleY"
                                                     Duration="0:0:0.1"
                                                     From="0" To="1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>

                        <EventTrigger RoutedEvent="FrameworkElement.Unloaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ScaleTransform"
                                                     Storyboard.TargetProperty="ScaleX"
                                                     Duration="0:0:0.1"
                                                     To="0"/>
                                    <DoubleAnimation Storyboard.TargetName="ScaleTransform"
                                                     Storyboard.TargetProperty="ScaleY"
                                                     Duration="0:0:0.1"
                                                     To="0"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Question. Animations when adding the element (FrameworkElement.Loaded) played not always. Such feeling that it is played when an item has been created, but not yet displayed. The animation when item is deleted (FrameworkElement.Unloaded) does not play. So, how to fix it?

Unloaded will never work as your element is 'unloaded' (or is gone from the visual tree) by the time unloaded event is fired. You will have to set some property to unload the item, Run the animation on the property set and when the animation is finished you will have to physically unload the item. I hope it makes sense. — Krishna, May 20 '15 at 14:25

feO2x · Accepted Answer · 2015-05-20T15:30:33.343

Your Loaded storyboard is defined correctly, thus there should be other reasons why it is sometimes played correctly and sometimes not. Is there a long-living operation on the UI thread when a new item is added to the list box? This would result in a freeze so that the animation is not played fluently all the time.

Your Unloaded storyboard is not played because this event is raised when the element is removed from the visual / logical tree that is used to render the whole scene. This storyboard should be started before this removal but unfortunately there is no mechanism / event that tells that an item is to be removed.

Currently there is no easy way to fade out an item from an ItemsControl in WPF. In WinRT and Silverlight, there are two separate visual states for ItemsControl items that you can use for fade-in or fade-out. As Krishna mentioned, the only way is to implement custom functionality to tell an item that it is about to be removed and that it should run the fade-out animation. After that animation, the item can be removed from the visual / logical tree.

Playing the animation after "FrameworkElement.Loaded" and before "Unloaded" (in ListBoxItem)

1 Answers1