Animating items added to a ListBox database

Question

I have a beatbox in my Windows Phone application. I would like to animate the elements added to the ListBox when they are added to the Observable collection (actually my ListBox is linked to the CollectionViewSource, where I use filtering in the Observable collection).

The current experience of my application is that I have a good transition to the page, and then all the elements in the list “appear” as soon as the collection is full, which makes the work less fluid than the rest of the application.

What is the best way to do this?

Answer 1

After browsing the net for a week and evaluating a number of different methods, this solution works fantastic here.

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

It uses Reactive Extensions to load items into the Observable Collection with a delay, using the Bahaviors to animate downloads.

Answer 2

I did the animation in the items added to the list when it was added. I ran list items for the class instead of the observable colection. Give it a try.

<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); }