Small animations in Silverlight

Question

I've made a simple storyboard that takes a particular ListBoxItem and lets it grow by a factor of 1.3. I'd like to add this animation to every ListBoxItem I create dynamically so that it can be activated when it gets a mouse-over, but the storyboard seems to be hardcoded to that first item:

    <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>

How should I go about duplicating this storyboard and setting the target to every listboxitem?

Cheers

Nik

PS, I believe I have some errors in the animation, don't worry about that, it's not part of my question :-)

Answer 1

You can define a ControlTemplate for ListBoxItem in the Resources section of the UserControl like this:

<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>

Handle the MouseEnter event:

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

    itemStory.Begin();
}

And use it like this in XAML:

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

Or like this in C#:

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

Answer 2

If you use the visual state manager, you can apply this to all of type:

This shows how to do just that.