Bind storyboard color animation from local string variable

Question

I'm still a bit of an amateur in regards to binding in WPF but I was hoping I could get some help in regards to binding a string to a storyboard animation. I have a custom UserControl with nothing more then a TextBox and some buttons laid out. What I want to do is whenever the TextBox gets information from the server that the foreground would animate from a light color to a dark color. Upon creation of this control the user specifies what colors they want to see animated. As an example let's go with light green to dark green. I have 2 variables inside the UserControl that are stored as strings and now I would like to bind them to the storyboard animation. Any help would be greatly appreciated.

XAML:

<EventTrigger RoutedEvent="TextBox.TextChanged">
    <BeginStoryboard>
        <Storyboard>
            <ColorAnimation AutoReverse="False" Duration="0:0:2" From="{Binding StartTextColor}" To="{Binding EndTextColor}"
                Storyboard.TargetName="txtTextField" AccelerationRatio="1" 
                Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)"
                 FillBehavior="HoldEnd">
            </ColorAnimation>
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

Code:

public string StartTextColor
{
    get
    {
        return startTextColor;
    }
    set
    {
        startTextColor= value;
    }
}

public string EndTextColor
{
    get
    {
        return _endTextColor;
    }
    set
    {
        _endTextColor= value;
    }
}

Answer 1

Just done a quick test with string color binding to your animation and it works fine. If you're ever binding you should make sure your object implements INotifyPropertyChanged as this notifies the XAML that a property has changed.

My Test:

  public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private string startTextColor = "Green";
        private string _endTextColor = "Red";

        public MainWindow()
        {
            InitializeComponent();
        }

        public string StartTextColor
        {
            get { return startTextColor; }
            set
            {
                startTextColor = value;
                NotifyPropertyChanged("StartTextColor");
            }
        }

        public string EndTextColor
        {
            get { return _endTextColor; }
            set
            {
                _endTextColor = value;
                NotifyPropertyChanged("EndTextColor");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        /// <summary>
        /// Notifies the property changed.
        /// </summary>
        /// <param name="info">The info.</param>
        public void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }

    }

Xaml:

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication4"
        Title="MainWindow" Height="350" Width="2640" Name="UI" >
        <Grid>
            <TextBox Name="txtbx">
              <TextBox.Triggers>
                <EventTrigger RoutedEvent="TextBox.TextChanged">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation AutoReverse="False" Duration="0:0:2" AccelerationRatio="1" Storyboard.TargetName="txtbx" FillBehavior="HoldEnd" 
                                            From="{Binding ElementName=UI, Path=StartTextColor}" 
                                            To="{Binding ElementName=UI, Path=EndTextColor}"
                                            Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)">
                            </ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
              </TextBox.Triggers>
            </TextBox>
        </Grid>
</Window>

Hope this helps :)