Validation adorner does not completely disappear in Animation

Question

Hi,

I have a WPF Window that contains a ContentPresenter that has Height and Width set to 0 by default. When a user clicks a button, I run an animation to transform the ContentPresenter's Height and Width properties to 896,1024 (actually it does 3 rotations whilst its growing, too) and this is all good...

The DataContext for the User control implements IDataErrorInfo and if the user does not click the 'I have read and understand these Health & Safety instructions" checkbox, then a red border is shown around the checkbox...

My problem is that if the user clicks 'Cancel', and I run the animation that shrinks the Height & Width back down to 0,0, then the UserControl shrinks as required, but the red border does not completely disappear - it leaves a single red pixel in the middle of my Window

Anybody any ideas what I'm doing wrong? The 'red-border', I'm assuming is just an Adorner being rendered by WPF for me, so I'm not sure how to change this behaviour...

All help much appreciated!

Update - I tried Abe's excellent suggestion, but unfortunately it didn't work, but it did get me trying other stuff... So now I have (temporarily) commented out the 'shrinking' animations, and simply set the visibility to Collapsed at KeyTime="0:0:0.9"... when I press cancel, just less than a second later, the UserControl disappears but the red adorner stubbornly remains :(

As an extra bit of info (not sure if relevant?) the UserControl being shown in the ContentPresenter also contains a ContentPresenter to render a UserControl, and its the inner content that contains the validation adorner...

code sample:

<Button
    Name="signInButton"
    Grid.Row="0" Grid.Column="0"
    Margin="30"
    HorizontalAlignment="Right" VerticalAlignment="Bottom"
    Style="{StaticResource LargeButtonStyle}" 
    Content="Sign In"
    Command="{Binding SignInCommand}">
    <Button.Triggers>
        <EventTrigger
            RoutedEvent="Button.Click">
            <BeginStoryboard
                Storyboard="{DynamicResource openViewAnimation}" />
        </EventTrigger>
    </Button.Triggers>
</Button>

<ContentPresenter
    Name="mainView"
    Grid.RowSpan="2" Grid.ColumnSpan="2"
    HorizontalAlignment="Center" VerticalAlignment="Center"
    Opacity="0.9"
    Content="{Binding CurrentContent}">
    <ContentPresenter.RenderTransform>
        <RotateTransform
            Angle="0" />
    </ContentPresenter.RenderTransform>
</ContentPresenter>

<Storyboard x:Key="closeViewAnimation">
    <DoubleAnimation
        Storyboard.TargetName="mainView" Storyboard.TargetProperty="Height"
        From="896" To="0" Duration="0:0:0.9"
        AutoReverse="False" RepeatBehavior="1x" />
    <DoubleAnimation
        Storyboard.TargetName="mainView" Storyboard.TargetProperty="Width"
        From="1024" To="0" Duration="0:0:0.9"
        AutoReverse="False" RepeatBehavior="1x" />
</Storyboard>

Thanks, Ian

Answer 1

If you add an ObjectAnimationUsingKeyFrames that sets the Visibility of the element to Collapsed at the time that the other animations complete, the adorner will go away also.

<Storyboard x:Key="closeViewAnimation">
    <DoubleAnimation
        Storyboard.TargetName="mainView" Storyboard.TargetProperty="Height"
        From="896" To="0" Duration="0:0:0.9"
        AutoReverse="False" RepeatBehavior="1x" />
    <DoubleAnimation
        Storyboard.TargetName="mainView" Storyboard.TargetProperty="Width"
        From="1024" To="0" Duration="0:0:0.9"
        AutoReverse="False" RepeatBehavior="1x" />
    <ObjectAnimationUsingKeyFrames 
        Storyboard.TargetName="mainView"
        Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" 
            KeyTime="0:0:0.9" />
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

Obviously, you would need to do the reverse operation at KeyTime 0 for the openViewAnimation.

Answer 2

I have the same problem with standard ValidationAdorners lagging behind main animation and sometimes are not properly disappearing.

Is there a way to completely remove standard validation adorners?

EDIT: I guess I answered my own question.

I set Validation.ErrorTemplate="{x:Null}" and provided error message through a different control. So all red frames disappeared.