Petites animations dans Silverlight

Question

J'ai créé un storyboard simple qui prend un ListBoxItem particulier et le fait grossir d'un facteur de 1,3. Je voudrais ajouter cette animation à chaque ListBoxItem je crée dynamiquement afin qu'il puisse être activé quand il obtient une souris sur, mais le story-board semble être codé en dur à ce premier article:

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

Comment dois-je allez-vous dupliquer ce storyboard et définir la cible sur chaque listbox?

Vive

Nik

PS, je crois avoir quelques erreurs dans l'animation, ne vous inquiétez pas à ce sujet, il ne fait pas partie de ma question :-)

Answer 1

Vous pouvez définir un ControlTemplate pour ListBoxItem dans les Ressources section du UserControl comme ceci:

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

Gérer l'événement MouseEnter:

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

    itemStory.Begin(); 
} 

et utilisation c'est comme ça en XAML:

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

Ou comme celui-ci en C#:

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

Answer 2

Si vous utilisez le gestionnaire d'état visuel, vous pouvez appliquer à tout type:

This montre comment faire exactement cela.