Animar elementos agregados a un ListBox de datos

Question

Tengo un ListBox de datos en mi aplicación de Windows Phone. Me gustaría animar los elementos que se agregan al ListBox cuando se agregan a la colección Observable (en realidad, mi ListBox está vinculado a un CollectionViewSource donde utilizo el filtrado en la colección Observable).

La experiencia actual de mi aplicación es que tengo una buena transición de página y luego todos los elementos en el cuadro de lista "aparecen" tan pronto como se llena la colección, haciendo que la experiencia sea menos fluida que el resto de la aplicación.

¿Cuál es la mejor manera de hacerlo?

Answer 1

He hecho animación en los elementos agregados al cuadro de lista cuando se agrega. Envié los elementos del cuadro de lista a una clase en lugar de una colección observable. Intentalo.

<ListBox Name="listBox1" Width="Auto" HorizontalAlignment="Left" ItemsSource="{Binding Img}" DataContext="{Binding}" Margin="0,70,0,0" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" Background="White"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Border BorderThickness="0,0.3,0,0.3" Width="Auto" BorderBrush="Black" > 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="*" /> 
        </Grid.RowDefinitions> 
        <Image Grid.Row="0" Source="{Binding thumb}" Stretch="Fill" Height="174" Opacity="0.04"></Image> 
        <StackPanel Name="ContentGrid" Grid.Row="0" Height="175" Orientation="Vertical" Width="Auto"> 
         <StackPanel.Resources> 
          <EventTrigger x:Name="event" RoutedEvent="StackPanel.Loaded"> 
           <EventTrigger.Actions> 
            <BeginStoryboard> 
             <Storyboard x:Name="mystoryboard"> 
              <DoubleAnimationUsingKeyFrames 
              Storyboard.TargetName="Trans" 
              Storyboard.TargetProperty="X"> 
               <LinearDoubleKeyFrame Value="-387" KeyTime="0:0:1" /> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames 
              Storyboard.TargetName="Trans1" 
              Storyboard.TargetProperty="X"> 
               <LinearDoubleKeyFrame Value="350" KeyTime="0:0:1" /> 
               <LinearDoubleKeyFrame Value="-350" KeyTime="0:0:1.6" /> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames 
              Storyboard.TargetName="Trans2" 
              Storyboard.TargetProperty="X"> 
               <LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" /> 
               <LinearDoubleKeyFrame Value="-350" KeyTime="0:0:2.5" /> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames 
              Storyboard.TargetName="Trans3" 
              Storyboard.TargetProperty="Y"> 
               <LinearDoubleKeyFrame Value="-165" KeyTime="0:0:2" /> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimation 
              Storyboard.TargetName="Imageopac" 
              Storyboard.TargetProperty="Opacity" 
              From="0.0" To="0.5" Duration="0:0:5" 
               /> 
             </Storyboard> 
            </BeginStoryboard> 
           </EventTrigger.Actions> 
          </EventTrigger> 
         </StackPanel.Resources> 
         <Image Height="165" HorizontalAlignment="Left" Margin="400,40,-400,0" VerticalAlignment="Top" Width="175" Source="{Binding thumb}"> 
          <Image.RenderTransform> 
           <TranslateTransform x:Name="Trans" X="0" Y="0" /> 
          </Image.RenderTransform> 
         </Image> 
         <Image Height="100" Name="Imageopac" HorizontalAlignment="Left" Margin="150,63.5,-400,0" Source="{Binding thumb}" Opacity="0.5"> 
          <Image.RenderTransform > 
           <CompositeTransform ScaleY="-1" SkewX="50" CenterY="-13.5" TranslateX="0" TranslateY="0"/> 
          </Image.RenderTransform> 
          <Image.OpacityMask> 
           <LinearGradientBrush StartPoint="0,1" EndPoint="0,0"> 
            <GradientStop Offset="-1.8" Color="Black"></GradientStop> 
            <GradientStop Offset="0.9" Color="Transparent"></GradientStop> 
           </LinearGradientBrush> 
          </Image.OpacityMask> 
         </Image> 
         <TextBlock Name="text1" Width="1000" TextWrapping="NoWrap" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="550,-335,-200,0" Text="{Binding title}" Foreground="Black" > 
          <TextBlock.RenderTransform> 
           <TranslateTransform x:Name="Trans1" X="0" Y="0" /> 
          </TextBlock.RenderTransform> 
         </TextBlock> 
         <TextBlock Name="text2" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="550,-300,-200,0" Text="{Binding page}" Foreground="Black" > 
           <TextBlock.RenderTransform> 
         <TranslateTransform x:Name="Trans2" X="0" Y="0" /> 
         </TextBlock.RenderTransform> 
         </TextBlock> 
         <TextBlock FontSize="16" TextWrapping="Wrap" Margin="198,-100,0,0" Text="{Binding Name}" Foreground="Black" > 
         <TextBlock.RenderTransform> 
         <TranslateTransform x:Name="Trans3" X="0" Y="0" /> 
         </TextBlock.RenderTransform> 
         </TextBlock> 
        </StackPanel> 
       </Grid> 
      </Border> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

---

public class img 
{ 
    public string thumb { get; set; } 
    public string Name { get; set; } 
    public string page { get; set; } 
    public string title { get; set; } 
} 


for (i = 0; i < result.Length; i++) 
{ 
    Img data = new Img() 
    { 
     thumb = "/PhoneApp9;component/images/1_thump.jpg.jpg", 
     page = "Page", 
     Name = "string", 
     title = "Ikea Catalogue" 
    }; 

    listBox1.Items.Add(data); 
} 

Answer 2

Después de buscar por la web durante más de una semana y la evaluación de una serie de técnicas diferentes, esta solución funciona aquí fantástico.

http://tozon.info/blog/post/2010/10/13/Reactive-Extensions-3-Windows-Phone-7.aspx

http://fiercedesign.wordpress.com/2011/12/27/windows-phone-reactive-extensions-rx-2

Utiliza extensiones reactivas para cargar artículos básicamente en una colección observable con un retraso, usando Bahaviors para animar carga.