Question

I’m developing an application in WPF (.NET 4).

I have an attached property that I created in order to easily determine if a control is in a “Valid” state.

    /// <summary>
    /// Initializes static members of the <see cref="ValidationProperty"/> class. 
    /// </summary>
    static ValidationProperty()
    {
        // Register attached dependency property.
        IsValidProperty = DependencyProperty.RegisterAttached("IsValid", typeof(bool),
                                                              typeof(ValidationProperty),
                                                              new FrameworkPropertyMetadata(true, ValidationValueChanged));
    }

    (...)

    /// <summary>
    /// Gets or sets the Dependency Property used to determine if an element is valid.
    /// </summary>
    public static DependencyProperty IsValidProperty { get; set; }

    (...)

I would like to play an animation whenever the value is false. The animation could either be defined within the control itself, or in its template. The name of the storyboard will always be constant, i.e.: “InvalidInput”.

Here is my callback:

    /// <summary>
    /// Event raised when the "Is Valid" dependency property's value changes.
    /// </summary>
    /// <param name="sender">The object that raised the event.</param>
    /// <param name="e">The arguments passed to the event.</param>
    private static void ValidationValueChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        var invalidControl = sender as UserControl;

        if (invalidControl == null || !(e.NewValue is bool))
        {
            return;
        }

        var isValid = (bool)e.NewValue;

        if (isValid)
        {
            return;
        }

        var userControlInvalidInputStoryboard = invalidControl.Resources["InvalidInput"] as Storyboard;
        var templatedInvalidInputStoryboard = invalidControl.Template.Resources["InvalidInput"] as Storyboard;

        if (userControlInvalidInputStoryboard != null)
        {
            userControlInvalidInputStoryboard.Begin(invalidControl);
            return;
        }

        if (templatedInvalidInputStoryboard != null)
        {
            templatedInvalidInputStoryboard.Begin(invalidControl, invalidControl.Template);
            return;
        }
    }

The problem right now is that I’m unable to find the Storyboard defined within either the control or its template. Both userControlInvalidInputStoryboard and templatedInvalidInputStoryboard are null.

I suspect this is due to the fact that the dependency object is cast to a User Control instead of the real type.

Is there any way to retrieve the template and its storyboard ?

Edit: As requested, here is the XAML of the control which uses this Attached Property

<UserControl
   (...)
xmlns:AttachedProperties="clr-namespace:Controls.AttachedProperties"
x:Name="Root">
<Grid x:Name="LayoutRoot">
    <TextBox x:Name="TextBox" 
             Text="{Binding Path=(AttachedProperties:TextProperty.Text), UpdateSourceTrigger=PropertyChanged, 
                            RelativeSource={RelativeSource AncestorType={x:Type Custom:UsernameTextBox}}, Mode=TwoWay,
                            TargetNullValue={x:Static Custom:UsernameTextBox.DefaultKeyword}, FallbackValue=DefaultKeyword}" 
             HorizontalAlignment="Left" Width="292" Style="{DynamicResource StandardTextBoxStyle}" 
             Height="35" VerticalAlignment="Top" TabIndex="0" 
             MaxLines="1" MaxLength="30" 
             FontSize="16" GotFocus="TextBoxGotFocus" LostFocus="TextBoxLostFocus" TextChanged="TextBoxTextChanged" FontWeight="Bold"/>
</Grid>

And here’s how I instantiated the control:

<Custom:UsernameTextBox x:Name="UsernameTextbox" 
   AttachedProperties:ValidationProperty.IsValid="{Binding CodexLoginService.UsernameIsValid,   UpdateSourceTrigger=PropertyChanged}" 
   AttachedProperties:TextProperty.Text="{Binding CodexLoginService.Username, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
   KeyUp="OnUsernameChanged"/>

Edit #2: As proposed, I created a Visual State Group in my template:

        <VisualStateGroup x:Name="InvalidStates">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.2" To="Invalid"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Invalid">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="InvalidFrame">
                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>                           </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>

Attempting to change the state of the control does not work, the method returns false:

VisualStateManager.GoToState(invalidControl, "Invalid", true);

Answer 1

If you implement VisualStates you can forget about the name of the animation and just change the state. Check this article.