Stackpanel add item animation

Question

Hello, I've been struggling a while with marquee-style image scrolling control.

At a moment, I stuck up with templated ItemsControl:

<Window.Resources>
    <DataTemplate x:Key="itemsTemplate">
        <Image Source="{Binding AbsolutePath}"></Image>
    </DataTemplate>
</Window.Resources>
<ItemsControl ItemTemplate="{StaticResource itemsTemplate}" x:Name="ic"
              ItemsSource="{Binding ElementName=mainWindow, Path=DataItems}" VirtualizingStackPanel.IsVirtualizing="True">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical" VerticalAlignment="Bottom" 
                                    VirtualizingStackPanel.IsVirtualizing="True" >                    
            </VirtualizingStackPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

ItemsControl is bound to ObservableCollection, so I can add items at runtime. As soon as item goes off-screen it's removed from ObservableCollection.

The last thing to do is implementing custom item add behavior (smooth slide-in instead of insert-translateothers behavior). Shall I derive from StackPanel to achieve such effect or just perform DoubleAnimation on currently adding item? Any suggestions appreciated.

Answer 1

Check this out: Animate WPF Datatemplate when item added to Listbox. Will it suit your needs?

Answer 2

One more questions: Is it possible to change DoubleAnimation Duration at runtime? (I would like to calculate it depending on image height). I was trying to bind Duration to code-behind variable -> "Cannot freeze this Storyboard timeline tree for use across threads" thrown. Here's my XAML:

<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:al="http://schemas.AvalonLambdas/AvalonLambdas"
Title="Window1" Height="900" Width="800" x:Name="mainWindow">
<Window.Resources>
    <Storyboard x:Name="slide" x:Key="sbslide">
        <DoubleAnimation x:Name="dblAnimation"
                            Storyboard.TargetName="grid" From="0" 
                            Duration="{Binding Path=ts}" Completed="timer_Tick"
                            Storyboard.TargetProperty="Height">
        </DoubleAnimation>
    </Storyboard>
    <DataTemplate x:Key="itemsTemplate" x:Name="dt">
        <Grid x:Name="grid" Height="{Binding ElementName=img,Path=RenderSize.Height}" ClipToBounds="True">
            <Canvas Height="{Binding ElementName=img,Path=Height}">
                <Image x:Name="img" Source="{Binding AbsolutePath}" ClipToBounds="True"
                       Width="{Binding ElementName=mainWindow,Path=Width,Converter={al:LambdaValueConverter param -20}}">
                </Image>
            </Canvas>
        </Grid>
        <DataTemplate.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="img">
                <BeginStoryboard Storyboard="{StaticResource sbslide}">
                </BeginStoryboard>
            </EventTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</Window.Resources>
<ItemsControl ItemTemplate="{StaticResource itemsTemplate}" x:Name="ic"
              ItemsSource="{Binding ElementName=mainWindow, Path=DataItems}" 
              VirtualizingStackPanel.IsVirtualizing="True">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel x:Name="vsp" Orientation="Vertical" VerticalAlignment="Bottom" 
                                    VirtualizingStackPanel.IsVirtualizing="True">
            </VirtualizingStackPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>