CODEWITHSUNDEEP
listviewanimationwindows-runtime
Jesus Rodriguez
Jesus Rodriguez

Reputation: 12018

How to remove ListView's add item animation?

I have a ListView and I edited its ItemContainerStyle to modify some style but I don't know how to remove that annoying animation when you add an item.

With an ItemsControl, when you add a new item, it appears instantly, without any animation.

With ListView, the item takes a while and then, it starts an animation to show up.

I just want to remove that add animation and when I click on Add item it appears instantly, no extra stuff.

I think that it should belong to ItemContainerStyle but even I commented out all visualstate animations and is still there. I'm missing something out.

Upvotes: 12

Views: 9509

Answers (7)

Mohit Atray
Mohit Atray

Reputation: 451

This will work --

listView.ItemContainerTransitions = null;

You have to assign a new reference (or null) to the ItemContainerTransitions property. Changing the values in the collection already referenced by this property will not work.

This will NOT work --

listView.ItemContainerTransitions.Clear();

Upvotes: 1

Niro
Niro

Reputation: 334

Beside the suggested ItemContainerTransitions removal, there's an additional animation you might want to remove.

In the ListViewItem template there's a transform animation called ContentPresenterTranslateTransform, it slides the item content into place. You can just remove that animation from template's storyboards.

Upvotes: 0

Reece Kenney
Reece Kenney

Reputation: 2964

As one of the comments mentioned, simply adding this did the trick for me:

<ListView.ItemContainerTransitions> 
    <TransitionCollection/> 
</ListView.ItemContainerTransitions>

No need for all the other code.

Upvotes: 7

Daniel
Daniel

Reputation: 9521

Thanks to Damir's answer, this is how I did it. Just add this in your App.xaml

<Application...>
    <Application.Resources>
        <ResourceDictionary>
            ...
            <Style TargetType="ListView">
                <Setter Property="ItemContainerTransitions">
                    <Setter.Value>
                        <TransitionCollection/>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Upvotes: 3

Ernie Thomason
Ernie Thomason

Reputation: 1709

In UWP, I created the following code to remove the animation:

// Remove Add/Delete animations
TransitionCollection tc = _listView.ItemContainerTransitions;
for (int i = tc.Count - 1; i >= 0; i--) if (tc[i] is AddDeleteThemeTransition) tc.RemoveAt(i);

Upvotes: -1

Damir Arh
Damir Arh

Reputation: 17855

These animations are called transitions and they are part of ListViewStyle. To change it right click on ListView control in the designer and select Edit Template > Edit a Copy.... This will add the built-in style to your XAML.

The following part of the style is of interest to you:

<Setter Property="ItemContainerTransitions">
    <Setter.Value>
        <TransitionCollection>
            <AddDeleteThemeTransition/>
            <ContentThemeTransition/>
            <ReorderThemeTransition/>
            <EntranceThemeTransition IsStaggeringEnabled="False"/>
        </TransitionCollection>
    </Setter.Value>
</Setter>

I'm not sure which animation exactly you dislike but try removing AddDeleteThemeTransition and/or EntranceThemeTransition from TransitionCollection. It should do the trick.

Don't forget to make sure the modified style is applied to the desired ListView.

Upvotes: 19

Filip Skakun
Filip Skakun

Reputation: 31724

It might be in the default ItemsPanel.

You could try something like this:

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel>
            <VirtualizingStackPanel.ChildrenTransitions>
                <TransitionCollection/>
            </VirtualizingStackPanel.ChildrenTransitions>
        </VirtualizingStackPanel>
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

Why though do you want to go against the fluid part of the Fast and Fluid thing of the design language? Are you trying to implement something more bland than the templates or are you planning on adding your own transitions?

Upvotes: 4

Related Questions