Как запускать раскадровки один за другим в списке элементов управления DataBound

Question

В Silverlight (хотя я думаю, что это применимо и к WPF), у меня есть элемент управления Предметами, к которому привязан список Uris.

ItemsPanel - это WrapPanel (из набора инструментов Silverlight), а DataTemplate содержит изображение с привязкой к источнику.

Изображения с привязкой к данным отображаются нормально.

В xaml для каждого привязанного изображения у меня есть раскадровка, которая запускается Image.Loaded RoutedEvent на EventTrigger для каждого изображения.

Раскадровка увеличивает непрозрачность изображений с 0 до 1 в течение 1 секунды.

Когда при этом все изображения «исчезают» одновременно.

Вопрос: Как создать задержку, чтобы анимация последующих изображений начиналась вскоре после предыдущей? (Вспомните мексиканскую волну)

Обновление: Пример кода в ближайшее время

<ItemsControl x:Name="Items1" ItemsSource="{Binding}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel></toolkit:WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="#cccccc" BorderThickness="1" Margin="5">
                    <Image x:Name="myImage" Source="{Binding}" Width="100" Height="100" Stretch="Fill">
                        <Image.Triggers>
                            <EventTrigger RoutedEvent="Image.Loaded">
                                <BeginStoryboard>
                                    <Storyboard x:Name="myStoryboard">
                                        <DoubleAnimation Duration="00:00:03"
                            Storyboard.TargetName="myImage" 
                            Storyboard.TargetProperty="Opacity" 
                            From="0" To="1" />
                                    </Storyboard>
                                </BeginStoryboard>

                            </EventTrigger>
                        </Image.Triggers>
                    </Image>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Answer 1

Вы можете привязать DoubleAnimation.BeginTime к индексу ImageUri в вашем UriList.Конечно, вы должны использовать конвертер.

class UriIndexConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        int seconds = YourUriList.IndexOf(value); /* or something similar */

        return new TimeSpan(0, 0, seconds);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

В вашем DoubleAnimation:

BeginTime="{Binding Converter={StaticResource UriIndexConverter}}"

Answer 2

Мое предложение было бы сделать Queue<Storyboard>.Таким образом, вы можете запустить первый, и когда он запускает «завершенное» событие, вы можете удалить из очереди следующую раскадровку и запустить ее, когда она завершится, она отключит следующую и запустит это, и т. Д.