Небольшие анимации в Silverlight

Question

Я сделал простую раскадровку, которая берет определенный ListBoxItem и позволяет ему расти в 1,3 раза. Я хотел бы добавить эту анимацию к каждому ListBoxItem, который я создаю динамически, чтобы его можно было активировать при наведении мыши, но раскадровка кажется жестко закодированной для этого первого элемента:

    <Storyboard x:Name="ListItem_MouseEntered">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="RecentNews" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
            <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.3"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="RecentNews" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
            <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.3"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

Как мне создать копию этой раскадровки и установить цель для каждого элемента списка?

Приветствия

Nik

PS, я считаю, что у меня есть некоторые ошибки в анимации, не беспокойтесь об этом, это не часть моего вопроса: -)

Answer 1

Вы можете определить ControlTemplate для ListBoxItem в разделе Resources UserControl следующим образом:

<ControlTemplate x:Key="LIT" TargetType="ListBoxItem">
    <Border x:Name="MainBorder" BorderBrush="Red" BorderThickness="2" Background="Yellow" MouseEnter="Border_MouseEnter">
        <Border.Resources>
            <Storyboard x:Name="ItemStory">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ItemTransform" Storyboard.TargetProperty="ScaleX">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.3"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ItemTransform" Storyboard.TargetProperty="ScaleY">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.3"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Border.Resources>
        <Border.RenderTransform>
            <ScaleTransform x:Name="ItemTransform" />
        </Border.RenderTransform>
        <TextBlock Text="{TemplateBinding Content}" />
    </Border>
</ControlTemplate>

Обработка события MouseEnter:

private void Border_MouseEnter(object sender, MouseEventArgs e)
{
    Border itemBorder = (Border)sender;
    Storyboard itemStory = (Storyboard)itemBorder.FindName("ItemStory");

    itemStory.Begin();
}

И используйте это в XAML:

<ListBox x:Name="MyList">
    <ListBox.Items>
        <ListBoxItem Content="Toto 1" Template="{StaticResource LIT}" />
    </ListBox.Items>
</ListBox>

Или как в C #:

MyList.Items.Add(new ListBoxItem()
{
    Content="Toto 2",
    Template = (ControlTemplate)Resources["LIT"]
});

Answer 2

Если вы используете визуальный менеджер состояний, вы можете применить его ко всем типам:

Это показывает, как это сделать.