Animating items added to a databound ListBox

Question

I have a databound ListBox in my Windows Phone app. I would like to animate the items being added to the ListBox when they are added to the Observable collection (actually my ListBox is bound to a CollectionViewSource where I use filtering on the Observable collection).

The current experience of my app is that I have a nice page transition and then all the items in the listbox "appear" as soon as the collection is populated making the experience less fluid than the rest of the app.

What is the best way to go about doing that?

Answer 1

After looking around the web for over a week and evaluating a number of different techniques, this solution here works fantastic.

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 basically load items into an Observable Collection with a delay, using Bahaviors to animate loading.

Answer 2

I have done animation in the items added to the listbox when it is added.I ounded the listbox items to a class instead of observable colection. Try it.

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