TreeView. Animate when updating the list

[Frillaut]

Hi!
Can I turn animation off in TreeView? Not that she's bad, she's wonderful! But when the list is updated, it repeats the animation of opening the list.

[Frillaut]

Mmm?

[nicolaihenriksen]

@Frillaut Can you elaborate a bit on which animation you're referring to? The demo app contains an ability to manipulate the contents of a TreeView, and I don't see the animation repeating when items are added there?

[Frillaut]

I found the reason for the malfunction when adding. Sorting included animation. But more... If you enable VirtualizingStackPanel.IsVirtualizing, the list is scrolled to re-animate the open items. Any ideas?

[nicolaihenriksen]

@Frillaut I still can't repro the issue with VirtualizingStackPanel.IsVirtualizing="True". Can you provide a sample that illustrates the issue you're experiencing?

[Frillaut]

With the addition, I figured it out! Now the other is a little bit. In the left list, when scrolling, the animation will be repeated. Everything is fine with the right

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <TreeView Grid.Column="0"
              ScrollViewer.CanContentScroll="True"
              VirtualizingStackPanel.IsVirtualizing="True"
              VirtualizingStackPanel.VirtualizationMode="Recycling"
              ItemsSource="{Binding ListView}">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding ListView}">
                <TextBlock Text="{Binding Text}" />
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
    <TreeView Grid.Column="1"
              ItemsSource="{Binding ListView}">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding ListView}">
                <TextBlock Text="{Binding Text}" />
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</Grid>

public ICollectionView ListView { get; set; }
private ObservableCollection<TreeItem> _List = new();
public ObservableCollection<TreeItem> List { get => _List; set => Set(ref _List, value); }

public class TreeItem : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string? PropertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(PropertyName));
    protected virtual bool Set<T>(ref T field, T value, [CallerMemberName] string? PropertyName = null)
    {
        if (Equals(field, value)) return false;
        field = value;
        OnPropertyChanged(PropertyName);
        return true;
    }

    private string _Text;
    public string Text { get => _Text; set => Set(ref _Text, value); }

    public ICollectionView ListView { get; set; }
    private ObservableCollection<TreeItem> _List = new();
    public ObservableCollection<TreeItem> List { get => _List; set => Set(ref _List, value); }

    public TreeItem(string text)
    {
        ListView = CollectionViewSource.GetDefaultView(List);
        Text = text;
    }
}

[nicolaihenriksen]

@Frillaut I have tried to use your code to create a sample where I can reproduce the issue. Using the code provided, I don't actually see anything other than the root node(s), so I had to make some modifications to make sub-nodes show. And after having done that, I still don't see any animations when dynamically adding items to the collection at runtime.

Are you able to share a bit more of your setup? The view model (or code-behind) backing the TreeView.ItemsSource where you populate the initial tree? And also the code you use to add an item which you say is causing the animation to occur.

[Frillaut]

Mmm?

[nicolaihenriksen]

Thanks for the sample. My life has been overly busy recently so have had no freetime to look into this. I will get to it eventually though...

[Frillaut]

Thank you!

[nicolaihenriksen]

@Frillaut I had a look at your sample, and I can indeed reproduce the animation that occurs when IsVirtualizing=True and VirtualizationMode=Recycling. Changing to VirtualizationMode=Standard "fixes" the issue, just like setting IsVirtualizing=False. However, I assume you would like the settings applied, and avoid the animations.

Unfortunately, the MDIX style/template for the TreeViewItem explicitly applies these animations using visual states and visual transitions. These do not lend themselves well to extendibility, nor do they allow bindings (so an attached property could be used). So the only real option you're left with, apart from manipulating the visual states in runtime in your code (which is probably not trivial!), is to make your own local copy of the Style. Since the style kind of relies on these animations being in place in order for it to function properly, I think your best option might be to simply drop the Duration on the relevant animations to 0. My guess would be that it is mostly the "expanding/collapsing" of the child content that is relevant to mock with, and in that case you need to tweak the animations that operate on the ItemsHost and ScaleHost targets. I have highlighted two of them here, but there are actually a number of places you may need to tweak.

Depending on how you're using MDIX, you will need to inject this style into a ResourceDictionary somewhere in the visual tree. I believe you will need to add it as an implicit style (i.e. without x:Key) for it to be used; I don't believe you can reuse the "MaterialDesignTreeViewItem" key because of the way the resources are wired up.

Here is an example of adding in the resource locally within your TreeView:

<TreeView ScrollViewer.CanContentScroll="True"
          VirtualizingStackPanel.IsVirtualizing="True"
          VirtualizingStackPanel.VirtualizationMode="Recycling"
          ItemsSource="{Binding ListView}">
    <TreeView.Resources>
        <Style TargetType="{x:Type TreeViewItem}">
          <!-- TODO: Replace with copy of the current style with relevant animation durations dropped to 0 -->
        </Style>
    </TreeView.Resources>
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding ListView}">
            <TextBlock Text="{Binding Text}" />
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

Probably not the answer you were hoping for, but I hope it guides you in the right direction for solving your problem.

[Frillaut]

Thank you for your time. This should help me!