Как анимировать вставленные объекты в ItemsControl с помощью слайд-анимации?

Question

После просмотра нескольких примеров на этом сайте выяснилось, что тип анимации, который я хотел здесь , не так уж и сложен. Прямо сейчас у меня есть это в моем xaml:

<ItemsControl ItemsSource="{Binding MyCollection}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Name="Info">
                <TextBlock Text="{Binding ItemName}"/>
                <TextBlock Text="{Binding Quantity}"/>
                <TextBlock Text="{Binding Price}"/>
            </StackPanel>
            <DataTemplate.Resources>
                <Storyboard x:Key="Anim">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Info" 
                                            Storyboard.TargetProperty="(UIElement.Opacity)">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </DataTemplate.Resources>
            <DataTemplate.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard Storyboard="{StaticResource Anim}" />
                </EventTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

в коде, я добавляю последний элемент на первое место следующим образом:

MyCollection.Insert(0, new Transaction()
{
    Name = ItemName + "   ",
    Quantity = QuantityTraded, 
    Price = AtPrice
});

Со всеми этиминовый элемент исчезает в левом углу и толкает все существующие элементы вправо, но поведение быстро! Мне нужен перевод вместо непрозрачности, и для этого я должен иметь это в StackPanel внутри DataTemplate:

<StackPanel.RenderTransform>
    <TransformGroup>
        <TranslateTransform/>
    </TransformGroup>
</StackPanel.RenderTransform>

Что мне нужно иметь в Storyboard для TranslateTransform? Будет ли он анимировать все существующие элементы или они будут привязаны к своей целевой позиции, как они делают с этим кодом?

Я пробовал с blend, который вставил:

<b:Interaction.Behaviors>
    <b:FluidMoveBehavior Duration="0:0:5" AppliesTo="Children">
        <b:FluidMoveBehavior.EaseY>
            <BackEase EasingMode="EaseOut"/>
        </b:FluidMoveBehavior.EaseY>
        <b:FluidMoveBehavior.EaseX>
            <BackEase EasingMode="EaseIn"/>
        </b:FluidMoveBehavior.EaseX>
    </b:FluidMoveBehavior>
</b:Interaction.Behaviors>

в ItemsControlно это не изменило поведение!

Answer 1

В качестве отправной точки вы можете анимировать свойство Width StackPanel от 0 до его максимальной ширины. Это действительно подтолкнет все элементы вправо по мере роста первого элемента.

<Storyboard x:Key="Anim">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Info" 
                        Storyboard.TargetProperty="Width">
        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="100" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Но анимация Width может быть не визуальнойэффект, который вы намереваетесь.

Вы можете уточнить это и вместо этого анимировать Width внешнего элемента, который обрезает ваш внутренний StackPanel:

<DataTemplate>
    <StackPanel x:Name="Outer" Margin="5">
        <StackPanel x:Name="Info" Orientation="Vertical" HorizontalAlignment="Right" Width="50">
            <TextBlock Text="{Binding ItemName}"/>
            <TextBlock Text="{Binding Quantity}"/>
            <TextBlock Text="{Binding Price}"/>
        </StackPanel>
    </StackPanel>
    <DataTemplate.Resources>
        <Storyboard x:Key="Anim">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Outer" 
                                           Storyboard.TargetProperty="Width">
                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </DataTemplate.Resources>
    <DataTemplate.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard Storyboard="{StaticResource Anim}" />
        </EventTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

Возможно, вам придется внести некоторые корректировки отсюда, чтобы удалить любые жестко закодированные значения в анимации.