C# – Sequentially animate items in an ItemsControl

cwpfxaml

So as a simple example, if you have an ItemsControl like the one below which dynamically creates it's contents How could i add triggers so that each item animates in and has a BeginTime based on it's index in the list.

I've tried extending the button so that it contains a delay time and then binding the BeginTime of the animation contained in the triggers of the buttons ControlTemplate, there's issues there because of animations being freezable.

How can I create a Storyboard, either on the ItemsControl itself or the individual items, that shows each of the items one by one.

Any ideas?

starting point for my markup:

<Window.Resources>
    <ResourceDictionary >
        <Collections:ArrayList x:Key="ItemsList">
            <System:String>OPTIONS</System:String>
            <System:String>STICKERS</System:String>
            <System:String>STYLING</System:String>
            <System:String>WHEELS</System:String>
            <System:String>INTERIOR</System:String>
            <System:String>ROOF</System:String>
            <System:String>COLOURS</System:String>
            <System:String>VERSION</System:String>
        </Collections:ArrayList>
    </ResourceDictionary>
</Window.Resources>

<Grid>
    <ListView ItemsSource="{StaticResource ItemsList}">
        <ListView.Style>
            <Style>
                <Setter Property="ListView.ItemTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Button Content="{Binding}" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.Style>
    </ListView>
</Grid>

Cheers
J

Best Answer

There likely isn't a way to do this through XAML.

Rather, populate your ListView in your C# code-behind, and create your Storyboards and Triggers in code. An idea would be to extend Button to have a "Next Button To Show" field, play your storyboard for your showing animation, then trigger the next button to do the same, until you reach the last button where "NextButton == null"

Related Topic