Storyboard and DataTemplate

This post shows animating Item(s) in datatemplate
<UserControl x:Class=”SilverlightApplication9.Page”
Width=”600″ Height=”600″>
<Storyboard x:Key=”sbMouseEnter”
<DoubleAnimation From=”10″ To=”12″ Duration=”0:0:1″ />
<Storyboard x:Key=”sbMouseLeave”
<DoubleAnimation From=”12″ To=”10″ Duration=”0:0:1″ />
<DataTemplate x:Key=”dt”>
<TextBlock Padding=”5,0,5,0″ FontSize=”10″
Text=”{Binding FirstName}”/>
<Canvas Width=”500″ Height=”500″>
<data:DataGrid x:Name=”dataGrid5″
Height=”100″ Width=”450″ Margin=”0,5,0,10″ >
<data:DataGridTemplateColumn Header=”Name”
CellTemplate=”{StaticResource dt}”>
<ListBox Margin=”150″ Height=”100″ Width=”200″
x:Name=”list1″ ItemTemplate=”{StaticResource dt}”></ListBox>

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;

private void TextBlock_MouseEnter(object sender, MouseEventArgs e)
Storyboard sb = Resources[“sbMouseEnter”] as Storyboard;
Storyboard.SetTarget(sb.Children[0],(sender as TextBlock));
private void TextBlock_MouseLeave(object sender, MouseEventArgs e)
Storyboard sb = Resources[“sbMouseLeave”] as Storyboard;
Storyboard.SetTarget(sb.Children[0], (sender as TextBlock));

2 thoughts on “Storyboard and DataTemplate

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s