如何设置ListBoxItem中定义的UI元素的属性的动画？

Question

I have a listbox of a data template which consist some textblock and combobox. I want to apply some animations on textblock and combobox like i want to change textblock color on double click. So for I tried creating storyboard color animation for that but I got following error

Cannot resolve all property references in the property path 'Color'.
Verify that applicable objects support the properties.

my storyboard animation code is something like this :

 <Storyboard x:Key="onSubmitAnimation">              
    <ColorAnimation From="Green" To="Red" Duration="0:0:5" 
                    Storyboard.TargetProperty="Color" />        
 </Storyboard>

I wonder whether I'm going in right way or not, or there is something better way to implement color animation on textblock inside datatemplate of listbox? Would love to get all possible suggestions. Thanks in advance.

Edit: Here is the code I'm using to start storyboard;

 ListBoxItem item = (ListBoxItem)sender;
 Storyboard sb = this.FindResource("onSubmitAnimation") as Storyboard;
 Storyboard.SetTarget(sb, item);
 sb.Begin();

I guess I should pass object of textblock in setTarget function but i dont know how to get correct object of textblock inside listboxitem.

My listbox is named as Entrylistbox so I can access any item of listbox through it but not sure how can i access textblock and apply animation on that.

Edit 2: Still I'm not able to apply animation on textblock, I'm getting following error

 The method or operation is not implemented.

Here is my DataTemplate code

<DataTemplate x:Key="DefaultDataTemplate" >
  <Canvas Height="62"  Width="600" Background="White" >
    <Image Source="{Binding Path=IconBinding, Converter={StaticResource imageConverter} }" 
           Canvas.Left="100" Canvas.Top="10" Height="35"/>

      <TextBlock Name="textblock1"  Padding="5" Canvas.Left="20" Canvas.Top="10" 
                 Background="LightGray" VerticalAlignment="Center" Height="35" 
                 Foreground="Gray" TextAlignment="Center" FontSize="16" 
                 FontFamily="/TimeSheet;component/Resources/#Open Sans Extrabold"  
                 Width="60" FontWeight="Bold">
      <TextBlock.Text>
        <MultiBinding StringFormat="{}{0}H">
          <Binding Path="HoursBinding" />
        </MultiBinding>
      </TextBlock.Text>
    </Canvas>
  </DataTemplate>

I want to change background color of "textblock1" .

Answer 1

It seems as though your problem is accessing the TextBlock element from the containing ListBoxItem object that you have. This is a fairly common problem and is discussed in detail in the How to: Find DataTemplate-Generated Elements page on MSDN.

However, in short, you need to use the ItemContainerGenerator.ContainerFromItem method to access the UI elements defined within the DataTemplate that has been applied to the object in the ListBoxItem . Here is a short example from the linked page:

// Getting the currently selected ListBoxItem 
// Note that the ListBox must have 
// IsSynchronizedWithCurrentItem set to True for this to work
ListBoxItem myListBoxItem =
    (ListBoxItem)(myListBox.ItemContainerGenerator.ContainerFromItem(myListBox.Items.CurrentItem));

// Getting the ContentPresenter of myListBoxItem
ContentPresenter myContentPresenter = FindVisualChild<ContentPresenter>(myListBoxItem);

// Finding textBlock from the DataTemplate that is set on that ContentPresenter
DataTemplate myDataTemplate = myContentPresenter.ContentTemplate;
TextBlock myTextBlock = (TextBlock)myDataTemplate.FindName("textBlock", myContentPresenter);

// Do something to the DataTemplate-generated TextBlock
MessageBox.Show("The text of the TextBlock of the selected list item: "
    + myTextBlock.Text);