How can I animate a TextBlock when a SelectionChanged() event of a ListBox is called?

Question

In the code below, I want to start the animation when there's TextChanged() event of TextBlock is called. But when I try this code, I get an error...

"Failed to assign to property 'System.Windows.EventTrigger.RoutedEvent'"

I am lost, could someone please assist me that how can I do this?

<StackPanel>
   <ListBox Name"lstSample" SelectionChanged="lstSample_SelectionChanged">
       <ListBox.Triggers>
          <EventTrigger RoutedEvent="ListBox.SelectionChanged">
              <BeginStoryboard>
                  <BeginStoryboard.Storyboard>
                      <Storyboard>
                         <DoubleAnimation Storyboard.TargetName="txtSample" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1.0">
                              <DoubleAnimation.EasingFunction>
                                  <PowerEase EasingMode="EaseIn" Power="8"/>
                              </DoubleAnimation.EasingFunction>
                          </DoubleAnimation>
                      </Storyboard>
                  </BeginStoryboard.Storyboard>
              </BeginStoryboard>
          </EventTrigger>
       </ListBoxTriggers>
   </ListBox>

   <Border Name="brdrTextSampleLanguageOne" BorderThickness="0" BorderBrush="{StaticResource PhoneAccentBrush}">
      <TextBlock 
             Text="This is sample text." 
             Name="txtSample" 
             TextAlignment="Right" 
             VerticalAlignment="Center" />

    </Border>
</StackPanel>

Thanks very much.

Answer 1

Would be really easy using code, just create a property like:

 private string _textBlockText;
        public string textBlockText
        {
            get { return _textBlockText; }
            set
            {
                if (txtSample.Text != value)
                {
                    if (Storyboard1.GetCurrentState() != ClockState.Active)
                        Storyboard1.Begin();
                    txtSample.Text = value;
                }
            }
        }

Just use textBlockText property to update text in anywhere in your code and this should work like TextChanged event... Note: Storyboard1 is the animation you desire to play on TextChanged Event.

Answer 2

This will help you find the code below

<UserControl x:Class="WrapPanel.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
             xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
             xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot"
          Background="White">
        <StackPanel>
            <StackPanel.Resources>
                <Storyboard x:Key="mystoryboard">
                    <DoubleAnimation Storyboard.TargetName="txtSample"
                                     Storyboard.TargetProperty="Opacity"
                                     From="0"
                                     To="1"
                                     Duration="0:0:1.0">
                        <DoubleAnimation.EasingFunction>
                            <PowerEase EasingMode="EaseIn"
                                       Power="8" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </StackPanel.Resources>
            <ListBox Name="lstSample"
                     SelectionChanged="lstSample_SelectionChanged">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="SelectionChanged">
                        <ei:ControlStoryboardAction ControlStoryboardOption="Play"
                                                    Storyboard="{StaticResource mystoryboard}">

                        </ei:ControlStoryboardAction>

                    </i:EventTrigger>
                </i:Interaction.Triggers>

            </ListBox>

            <Border Name="brdrTextSampleLanguageOne"
                    BorderThickness="0">
            <TextBlock Text="This is sample text."
                       Name="txtSample"
                       TextAlignment="Right"
                       VerticalAlignment="Center" />

            </Border>

        </StackPanel>

    </Grid>
</UserControl>

Let me know if it works for you.

Cheers!

Vinod