Storyboard and DataTemplate

This post shows animating Item(s) in datatemplate
<UserControl x:Class=”SilverlightApplication9.Page”
xmlns=”http://schemas.microsoft.com/client/2007“
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”
Width=”600″ Height=”600″>
<UserControl.Resources>
<Storyboard x:Key=”sbMouseEnter”
Storyboard.TargetProperty=”FontSize”>
<DoubleAnimation From=”10″ To=”12″ Duration=”0:0:1″ />
</Storyboard>
<Storyboard x:Key=”sbMouseLeave”
Storyboard.TargetProperty=”FontSize”>
<DoubleAnimation From=”12″ To=”10″ Duration=”0:0:1″ />
</Storyboard>
<DataTemplate x:Key=”dt”>
<TextBlock Padding=”5,0,5,0″ FontSize=”10″
MouseEnter=”TextBlock_MouseEnter”
MouseLeave=”TextBlock_MouseLeave”
Text=”{Binding FirstName}”/>
</DataTemplate>
</UserControl.Resources>
<Canvas Width=”500″ Height=”500″>
<data:DataGrid x:Name=”dataGrid5″
Height=”100″ Width=”450″ Margin=”0,5,0,10″ >
<data:DataGrid.Columns>
<data:DataGridTemplateColumn Header=”Name”
CellTemplate=”{StaticResource dt}”>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
<ListBox Margin=”150″ Height=”100″ Width=”200″
x:Name=”list1″ ItemTemplate=”{StaticResource dt}”></ListBox>
</Canvas>
</UserControl>

we create 2 storyboards without the target property set, and datatemplate, we use the same datatemplate in datagrid as well as listbox and when the mouseenter and mouseleave events we could do some animation, for this sample we will do fontsize

we bind the controls to some data and we handle the mouse events on the textbox to begin the storyboard after setting the targetproperty

List<Customer> customers = new List<Customer>();
customers.Add(new Customer { FirstName = “John”, LastName = “Doe” });
customers.Add(new Customer { FirstName = “Jane”, LastName = “Doe” });
list1.ItemsSource = dataGrid5.ItemsSource = customers;