Using a Visual State Manager transition to show and collapse an element
===

I'm attempting to make an error provider control (simple error icon). I want it to fade when the visual state changes between Valid and Invalid (and vice-versa). I have confirmed my states update correctly.

I want the error icon to be collapsed when in the invalid state (so it doesn't take up space). With the template below, it's always collapsed, even during and after the transition to Invalid.

    <ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="clr-namespace:AppFramework.UI.Controls">
    
        <Style
            TargetType="{x:Type controls:ModelPropertyErrorProvider}">
            <Setter
                Property="IsTabStop"
                Value="False" />
            <Setter
                Property="Focusable"
                Value="False" />
            <Setter
                Property="Template">
                <Setter.Value>
                    <ControlTemplate
                        TargetType="{x:Type controls:ModelPropertyErrorProvider}">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup
                                    Name="ValidityStates">
    
                                    <VisualState
                                        Name="Valid" />
    
                                    <VisualState
                                        Name="Invalid">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="ErrorIcon"
                                                Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame
                                                    Value="{x:Static Visibility.Visible}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
    
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition
                                            To="Valid"
                                            GeneratedDuration="0:0:0.5">
                                            <VisualTransition.Storyboard>
                                                <Storyboard>
                                                    <DoubleAnimation
                                                        Storyboard.TargetName="ErrorIcon"
                                                        Storyboard.TargetProperty="Opacity"
                                                        From="1"
                                                        To="0" />
                                                </Storyboard>
                                            </VisualTransition.Storyboard>
                                        </VisualTransition>
    
                                        <VisualTransition
                                            To="Invalid"
                                            GeneratedDuration="0:0:0.5">
                                            <VisualTransition.Storyboard>
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames
                                                        Storyboard.TargetName="ErrorIcon"
                                                        Storyboard.TargetProperty="Visibility">
                                                        <DiscreteObjectKeyFrame
                                                            KeyTime="0:0:0"
                                                            Value="{x:Static Visibility.Visible}" />
                                                    </ObjectAnimationUsingKeyFrames>
    
                                                    <DoubleAnimation
                                                        Storyboard.TargetName="ErrorIcon"
                                                        Storyboard.TargetProperty="Opacity"
                                                        From="0"
                                                        To="1" />
                                                </Storyboard>
                                            </VisualTransition.Storyboard>
                                        </VisualTransition>
    
                                    </VisualStateGroup.Transitions>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
    
                            <Grid
                                Width="18"
                                Height="18"
                                Visibility="Collapsed"
                                ToolTip="{Binding Path=ModelProperty.ErrorMessages, RelativeSource={RelativeSource TemplatedParent}}"
                                x:Name="ErrorIcon">
                                <Ellipse
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                                    Fill="Red" />
                                <TextBlock
                                    Text="!"
                                    FontWeight="Bold"
                                    Foreground="White"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center" />
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
    </ResourceDictionary>