title: Animating ItemsControl items
body: <p>I am a bit stuck as to how to approach this problem.</p>
  
  <p>I have a tabcontrol on my solution and on a datatrigger I hide the tabcontrol and show an itemscontrol in its place with each item(tab) in a shape of a rectangular tile. And on selecting (simple mousedown) a 'tile' (another datatrigger ) I hide the itemscontrol and show the tabcontrol with the selected tile as the selected tab.</p>
  
  <p>The above works fine without any issue. Now I am trying to see if I can animate this whole process to make it look nice visually. My goal is to make all the tiles appear nicely with a fade in effect when the itemscontrol becomes visible and then fade nice gracefully when the itemscontrol become collapsed.</p>
  
  <p>My idea is to actually set all the items opacity to 0 to start with  then run a DoubleAnimation setting the opacity back to 1 on the datatrigger(giving a nice fade in effect). But I am not sure really how to approach this problem. </p>
  
  <p>Can anyone help me with this one please? Sorry I havent posted any xaml but my efforts trying to animate a listbox instead, failed </p>
  
  <p>Edit- Posting my efforts so far. Ideally I want it to work with an ItemsControl instead of a listbox as I dont need any interactions such as SelectedItem or anything
   please let me know if my approach itself is wrong so that I dont end up in wrong direction.</p>
  
  <p>I started with a listbox and in my resources i got the below style. Please ignore my multi trigger as I had few more conditions earlier but left it like that.</p>
  
  <pre><code>&lt;Style x:Key="CustomStyle" TargetType="{x:Type ListBoxItem}"&gt;
              &lt;Setter property="opacity" value="0"/&gt;
              &lt;Style.Triggers&gt;
                  &lt;MultiDataTrigger&gt;
                      &lt;MultiDataTrigger.Conditions&gt;
                          &lt;Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBox}},Path=Visibility}" Value="true"/&gt;
                      &lt;/MultiDataTrigger.Conditions&gt;
                      &lt;MultiDataTrigger.EnterActions&gt;
                          &lt;BeginStoryboard&gt;
                              &lt;Storyboard Duration="0:0:1"&gt;
  
                                  &lt;/ObjectAnimationUsingKeyFrames&gt;--&gt;
                                  &lt;DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Opacity" To="1"/&gt;
                              &lt;/Storyboard&gt;
                          &lt;/BeginStoryboard&gt;
                      &lt;/MultiDataTrigger.EnterActions&gt;
                  &lt;/MultiDataTrigger&gt;
              &lt;/Style.Triggers&gt;
          &lt;/Style&gt;
  </code></pre>
  
  <p>Then my listbox style</p>
  
  <pre><code>&lt;ListBox  Background="Transparent" ItemsSource="{Binding Children}" Visibility="{Binding ShowAnimation,Converter={StaticResource BooleanToVisibilityConverter}}"&gt;
  &lt;ListBox.Style&gt;
      &lt;Style&gt;
                              &lt;Style.Triggers&gt;
                                  &lt;DataTrigger Binding="{Binding ShowAnimation}" Value="True"&gt;
                                      &lt;Setter Property="ListBox.ItemContainerStyle" Value="{StaticResource CustomStyle}"/&gt;
                                  &lt;/DataTrigger&gt;
                              &lt;/Style.Triggers&gt;
                          &lt;/Style&gt;
  &lt;/ListBox.Style&gt;
  &lt;/ListBox&gt;
  </code></pre>