Small animations in Silverlight

Hi, 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 :-)

From stackoverflow

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

  This shows how to do just that.

  niklassaers-vc : Thanks a bunch, I didn't know about the Visual State Manager. I'll be sure to read up on it, sounds very useful. :-)

• 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"]
  });
  

  niklassaers-vc : Great, thank you very much. I wasn't aware of the ControlTemplate mechanism, this seems like just what I need. Great example! :-) Thanks again :-)