Wpf treeview - i want to animate the expansion of the nodes

Question

I have a databound treeview that i want to animate when the nodes are expanded. The animation should work vertically. Any ideas on how I could do that?

Answer 1

Get the original template of TreeViewItem and modify it to have the animation. Then install it thanks to the ItemContainerStyle of TreeView.

Answer 2

Download default style for treeview and apply it to your treeview control, then change/add this xaml code to the treeview style:

<!-- change item presenter to include a layout transform -->
<ItemsPresenter x:Name="ItemsHost">
 <ItemsPresenter.LayoutTransform>
  <ScaleTransform ScaleY="1" />
 </ItemsPresenter.LayoutTransform>
</ItemsPresenter>

<!-- Add this to control template triggers -->
<Trigger Property="IsExpanded" Value="true"> 
 <Trigger.EnterActions>
  <BeginStoryboard>
   <Storyboard>
   <DoubleAnimation Storyboard.TargetName="ItemsHost"
     Storyboard.TargetProperty="LayoutTransform.ScaleY"
     To="1"
     Duration="0:0:0.3" />
   <DoubleAnimation Storyboard.TargetName="ItemsHost"
     Storyboard.TargetProperty="Opacity"
     To="1"
     Duration="0:0:0.5" />    
   </Storyboard>
  </BeginStoryboard>
 </Trigger.EnterActions>

 <Trigger.ExitActions>
  <BeginStoryboard>
   <Storyboard>
   <DoubleAnimation Storyboard.TargetName="ItemsHost"
     Storyboard.TargetProperty="LayoutTransform.ScaleY"
     To="0"
     Duration="0:0:0.3" />
   <DoubleAnimation Storyboard.TargetName="ItemsHost"
     Storyboard.TargetProperty="Opacity"
     To="0"
     Duration="0:0:0.5" />    
  </Storyboard>
  </BeginStoryboard>
 </Trigger.ExitActions>    
</Trigger>  


<!-- comment this code -->
<!--Setter TargetName="ItemsHost"
   Property="Visibility"
   Value="Collapsed"/-->