Question

I am animating some property using DoubleAnimation. Before animation is triggered any local or Setter changes are properly reflected in the property. After animation completes nothing seems to be able to change the value of the property. I have even tried ClearValue and InvalidateProperty as well set calling SetValue but the value leftover from animation persists. If animation is repeated, the property continues to be animated as expected so it only appears to be locked for non-animation changes.

Is there a way to rectify this behavior? I want to use the animation to change the property value but still be able to change it manually or via a Setter to anything else. I know a thing or two about Dependency Property Value Precedence but the behavior I am currently experiencing is a bit strange. I’d hate to have to use “manual animations”.

EDIT: Added sample XAML + code.

<Window x:Class="WpfApplication7.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300"
        x:Name="_this"
        Background="Red">
    <DockPanel>
        <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" HorizontalAlignment="Center" >
            <Button Click="ToggleOnClick">Toggle!</Button>
            <Button Click="SetHalfOnClick">Set to 0.5!</Button>
        </StackPanel>
        <TextBox DockPanel.Dock="Bottom" IsReadOnly="True" Text="{Binding ElementName=_viewbox,Path=Opacity}" />
        <Viewbox x:Name="_viewbox">
            <Viewbox.Style>
                <Style TargetType="{x:Type FrameworkElement}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=IsToggled,ElementName=_this,Mode=OneWay}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation To="0.2"
                                                 Duration="0:0:0.5"
                                                 Storyboard.TargetProperty="(UIElement.Opacity)" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation To="1"
                                                 Duration="0:0:0.5"
                                                 Storyboard.TargetProperty="(UIElement.Opacity)" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Viewbox.Style>

            <TextBlock Text="Sample!" />
        </Viewbox>
    </DockPanel>
</Window>

Here is the code:

using System.Windows;

namespace WpfApplication7
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1
    {
        public bool IsToggled
        {
            get { return (bool)GetValue(IsToggledProperty); }
            set { SetValue(IsToggledProperty, value); }
        }

        public static readonly DependencyProperty IsToggledProperty = DependencyProperty.Register("IsToggled", typeof(bool), typeof(Window1), new UIPropertyMetadata(false));

        public Window1()
        {
            InitializeComponent();
        }

        private void ToggleOnClick(object sender, RoutedEventArgs e)
        {
            IsToggled = !IsToggled;
        }

        private void SetHalfOnClick(object sender, RoutedEventArgs e)
        {
            _viewbox.Opacity = 0.5;
        }
    }
}

Answer 1

Edit 2 in response to comments:

In your example you can work around the problem by:

1. Setting FillBehaviour to Stop on the animation
2. Adding a handler in code to the Completed event:

<Storyboard Completed="FadeOut_Completed">

Finally, set the desired ‘final’ value in the Completed handler (either explicitly or by using the current value of the property

private void FadeOut_Completed(object sender, EventArgs e)
{
   _viewbox.Opacity = _viewbox.Opacity; //this sets the DP value to the animated value
}

This works in your sample; hopefully it will work in your problem!

---

Original Answer

If you set the FillBehaviour property of the Storyboard to Stop (instead of the default value of HoldEnd) it will revert to the pre-animation value of the property once the animation completes. HoldEnd causes the animation to maintain its final value on the property

Update in response to comments:

As noted in the comments, the animation value will override the value set against the property when HoldEnd is specified as the FillBehaviour.

This makes it slightly tricky to set the value to something else.

I am not sure if there is a better way to achieve this, but the example below shows one way to work around it. Its hard to judge how applicable this is without a sample usage from the OP, but in this example I am animating the width of a Rectangle on load, and then resetting it to another value when a button is clicked:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Target" Storyboard.TargetProperty="Width"
                                     From="10" To="100" Duration="0:00:01" FillBehavior="HoldEnd" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Rectangle Height="10" Width="10" Fill="Red"  x:Name="Target"/>
        <Button Grid.Row="1" Content="Resize">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Target" Storyboard.TargetProperty="Width">
                                <DiscreteDoubleKeyFrame Value="50" KeyTime="0:00:00" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

This works because the new animation overrides the value set in the original.