title: Fade out removing item from itemscontrol
body: <p>I have a WPF-View with an ItemsControl that binds an ObservableCollection from the ViewModel. Now i want to fade out slowly items which i remove from the ObservableCollection.</p>
  
  <p>ViewModel:</p>
  
  <pre><code>public class ViewModel
  {
      public ObservableCollection&lt;string&gt; Items { get; set; }
  }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>&lt;Window x:Class="Sandbox.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"
      Name="mainWindow"&gt;
  &lt;Window.Resources&gt;
      &lt;DataTemplate x:Key="mytemplate"&gt;
          &lt;DataTemplate.Resources&gt;
              &lt;Storyboard x:Key="OnUnloaded"&gt;
                  &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid"&gt;
                      &lt;EasingDoubleKeyFrame KeyTime="0" Value="1"/&gt;
                      &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-0"/&gt;
                  &lt;/DoubleAnimationUsingKeyFrames&gt;
                  &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid"&gt;
                      &lt;EasingDoubleKeyFrame KeyTime="0" Value="0"/&gt;
                      &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-10"/&gt;
                  &lt;/DoubleAnimationUsingKeyFrames&gt;
              &lt;/Storyboard&gt;
          &lt;/DataTemplate.Resources&gt;
          &lt;Grid x:Name="grid" RenderTransformOrigin="0.5,0.5"&gt;
              &lt;Grid.RenderTransform&gt;
                  &lt;TransformGroup&gt;
                      &lt;ScaleTransform/&gt;
                      &lt;SkewTransform/&gt;
                      &lt;RotateTransform/&gt;
                      &lt;TranslateTransform/&gt;
                  &lt;/TransformGroup&gt;
              &lt;/Grid.RenderTransform&gt;
              &lt;TextBox Text="{Binding Mode=OneWay}"/&gt;
          &lt;/Grid&gt;
          &lt;DataTemplate.Triggers&gt;
              &lt;EventTrigger RoutedEvent="FrameworkElement.Unloaded"&gt;
                  &lt;BeginStoryboard Storyboard="{StaticResource OnUnloaded}"/&gt;
              &lt;/EventTrigger&gt;
          &lt;/DataTemplate.Triggers&gt;
      &lt;/DataTemplate&gt;
  &lt;/Window.Resources&gt;
  &lt;StackPanel&gt;
      &lt;ItemsControl Grid.Row="1" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource mytemplate}"/&gt;
  &lt;/StackPanel&gt;
  </code></pre>
  
  <p></p>
  
  <p>The problem i have is now, that the storyboard begins by removing an item from the collection, but at the same time the itemscontrol remove the item and for this, the animation is not in sight...</p>
  
  <p>any idea how to prevent remove the item before animation terminate?</p>