How to access a storyboard within an element resources from XAML?

Question

Consider this code:

Answer 1

What if this code was true?

<UserControl x:Class="MyApp.MyControl"
             ...
             xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
             xmlns:l="clr-namespace:MyApp"
             DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}">

    <UserControl.Resources>
        <Style TargetType="{x:Type l:MyControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type l:MyControl}">
                        <Border x:Name="brdBase" BorderThickness="1" BorderBrush="Cyan" Background="Black">
                            <Border.Resources>
                                <Storyboard x:Key="MyStory">
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="brdBase">
                                        <SplineColorKeyFrame KeyTime="0:0:1" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type l:MyControl}}, Path=SpecialColor}"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </Border.Resources>

                            <i:Interaction.Triggers>
                                <l:InteractiveTrigger Property="IsMouseOver" Value="True">
                                    <l:InteractiveTrigger.CommonActions>
                                        <BeginStoryboard Storyboard="{StaticResource MyStory}"/>
                                    </l:InteractiveTrigger.CommonActions>
                                </l:InteractiveTrigger>
                            </i:Interaction.Triggers>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
</UserControl>

If so, I could have a Trigger on IsMouseOver property...

I'm glad to say it's a working code :) I could only use EventTrigger in <Border.Triggers> tag. It was the limitation. So I started thinking about this idea: What if I could have a custom trigger which can work in FrameworkElement.Triggers scope? Here is the code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows;
using System.Windows.Interactivity;
using System.Windows.Media.Animation;

namespace TriggerTest
{
    /// <summary>
    /// InteractiveTrigger is a trigger that can be used as the System.Windows.Trigger but in the System.Windows.Interactivity.
    /// <para>
    /// Note: There is neither `EnterActions` nor `ExitActions` in this class. The `CommonActions` can be used instead of `EnterActions`.
    /// Also, the `Actions` property which is of type System.Windows.Interactivity.TriggerAction can be used.
    /// </para>
    /// <para> </para>
    /// <para>
    /// There is only one kind of triggers (i.e. EventTrigger) in the System.Windows.Interactivity. So you can use the following triggers in this namespace:
    /// <para>1- InteractiveTrigger : Trigger</para>
    /// <para>2- InteractiveMultiTrigger : MultiTrigger</para>
    /// <para>3- InteractiveDataTrigger : DataTrigger</para>
    /// <para>4- InteractiveMultiDataTrigger : MultiDataTrigger</para>
    /// </para>
    /// </summary>
    public class InteractiveTrigger : TriggerBase<FrameworkElement>
    {
        #region ___________________________________________________________________________________  Properties

        #region ________________________________________  Value

        /// <summary>
        /// [Wrapper property for ValueProperty]
        /// <para>
        /// Gets or sets the value to be compared with the property value of the element. The comparison is a reference equality check.
        /// </para>
        /// </summary>
        public object Value
        {
            get { return (object)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }

        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register("Value",
                                        typeof(object),
                                        typeof(InteractiveTrigger),
                                        new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.None, OnValuePropertyChanged));

        private static void OnValuePropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            InteractiveTrigger instance = sender as InteractiveTrigger;

            if (instance != null)
            {
                if (instance.CanFire)
                    instance.Fire();
            }
        }

        #endregion


        /// <summary>
        /// Gets or sets the name of the object with the property that causes the associated setters to be applied.
        /// </summary>
        public string SourceName
        {
            get;
            set;
        }

        /// <summary>
        /// Gets or sets the property that returns the value that is compared with this trigger.Value property. The comparison is a reference equality check.
        /// </summary>
        public DependencyProperty Property
        {
            get;
            set;
        }

        /// <summary>
        /// Gets or sets a collection of System.Windows.Setter objects, which describe the property values to apply when the trigger object becomes active.
        /// </summary>
        public List<Setter> Setters
        {
            get;
            set;
        }

        /// <summary>
        /// Gets or sets the collection of System.Windows.TriggerAction objects to apply when this trigger object becomes active.
        /// </summary>
        public List<System.Windows.TriggerAction> CommonActions
        {
            get;
            set;
        }

        /// <summary>
        /// Gets a value indicating whether this trigger can be active to apply setters and actions.
        /// </summary>
        private bool CanFire
        {
            get
            {
                if (this.AssociatedObject == null)
                {
                    return false;
                }
                else
                {
                    object associatedValue;

                    if (string.IsNullOrEmpty(SourceName))
                        associatedValue = this.AssociatedObject.GetValue(Property);
                    else
                        associatedValue = (this.AssociatedObject.FindName(SourceName) as DependencyObject).GetValue(Property);

                    TypeConverter typeConverter = TypeDescriptor.GetConverter(Property.PropertyType);
                    object realValue = typeConverter.ConvertFromString(Value.ToString());

                    return associatedValue.Equals(realValue);
                }
            }
        }

        #endregion


        #region ___________________________________________________________________________________  Methods

        /// <summary>
        /// Fires (activates) current trigger by setting setter values and invoking all actions.
        /// </summary>
        private void Fire()
        {
            //
            // Setting setters values to their associated properties..
            //
            foreach (Setter setter in Setters)
            {
                if (string.IsNullOrEmpty(setter.TargetName))
                    this.AssociatedObject.SetValue(setter.Property, setter.Value);
                else
                    (this.AssociatedObject.FindName(setter.TargetName) as DependencyObject).SetValue(setter.Property, setter.Value);
            }

            //
            // Firing actions.. 
            //
            foreach (System.Windows.TriggerAction action in CommonActions)
            {
                Type actionType = action.GetType();

                if (actionType == typeof(BeginStoryboard))
                {
                    (action as BeginStoryboard).Storyboard.Begin();
                }
                else
                    throw new NotImplementedException();
            }

            this.InvokeActions(null);
        }

        #endregion


        #region ___________________________________________________________________________________  Events

        public InteractiveTrigger()
        {
            Setters = new List<Setter>();
            CommonActions = new List<System.Windows.TriggerAction>();
        }

        protected override void OnAttached()
        {
            base.OnAttached();

            if (Property != null)
            {
                object propertyAssociatedObject;

                if (string.IsNullOrEmpty(SourceName))
                    propertyAssociatedObject = this.AssociatedObject;
                else
                    propertyAssociatedObject = this.AssociatedObject.FindName(SourceName);

                //
                // Adding a property changed listener to the property associated-object..
                //
                DependencyPropertyDescriptor dpDescriptor = DependencyPropertyDescriptor.FromProperty(Property, propertyAssociatedObject.GetType());
                dpDescriptor.AddValueChanged(propertyAssociatedObject, PropertyListener_ValueChanged);
            }
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();

            if (Property != null)
            {
                object propertyAssociatedObject;

                if (string.IsNullOrEmpty(SourceName))
                    propertyAssociatedObject = this.AssociatedObject;
                else
                    propertyAssociatedObject = this.AssociatedObject.FindName(SourceName);

                //
                // Removing previously added property changed listener from the associated-object..
                //
                DependencyPropertyDescriptor dpDescriptor = DependencyPropertyDescriptor.FromProperty(Property, propertyAssociatedObject.GetType());
                dpDescriptor.RemoveValueChanged(propertyAssociatedObject, PropertyListener_ValueChanged);
            }
        }

        private void PropertyListener_ValueChanged(object sender, EventArgs e)
        {
            if (CanFire)
                Fire();
        }

        #endregion
    }
}

I've also created other trigger types (i.e. InteractiveMultiTrigger, InteractiveDataTrigger, InteractiveMultiDataTrigger) as well as some more actions which makes it possible to have a conditional and multi-conditional EventTriggers. I'll publish them all if you professional guys confirm this solution.

Thanks for your attention!

Answer 2

Well, you can't really bind to "To" nor From, because the storyboard has to be frozen, in order to work efficiently with cross-threading.

Solution1) Simplest solution without hacks(involves code-behind): Add MouseOver event handler & in the event handler, locate necessary animation, set the "To" property directly, so you won't use binding and the "freezing" can be done. This way you won't hardcode anything :).

Solution2) There is a cool hack that supports XAML only( a little bit of converter magic ofcourse ), but I do not suggest it. It's cool nonetheless :) WPF animation: binding to the "To" attribute of storyboard animation See answer by Jason.

There are few things more that you can try:

Solution3) Don't use Dependency properties, but rather implement INotifyProperthChanged. This way you still can BIND "To". Note that I think this should theoretically work, but I have not tried.

Solution4) Apply Mode=OneTime to your binding. Maybe it works?

Solution5) Write your own attached behavior that will evaluate dependency property on correct thread and set "To" property. I think that will be nice solution.

Here is good duplicate too: WPF Animation "Cannot freeze this Storyboard timeline tree for use across threads"