WPF : Animating Width of an Control alternately with start value - wpf

Question

I have an image whose width should be animated from 0 to 30 pixels when a boolean property changes to true an back from 30 to 0 pixels if the property switches back to false.
In general, this works with this XAML code:
<Image.Style>
<Style TargetType="{x:Type Image}">
<!-- <Setter Property="Width" Value="0"/> -->
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=AIM, Path=IsDeletingEnabled}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Animate the Width of the Image from 0 to 30px within 300ms-->
<DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="30" Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!-- Animate the Width of the Image from 30 to 0px within 300ms-->
<DoubleAnimation Storyboard.TargetProperty="Width" From="30" To="0" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
The problem is, that before the Property IsDeletingEnabled switches to true the first time, the images witdh is 30px and it is visible. When I uncomment the first setter and set the Witdh to 0px by default (or the Visibilityto Hidden), the image isn't shown at startup but disappears instantly after switching IsDeletingEnabled from trueto fals. In this case, no animation is visible.
Has anywone a solution how I can set the Visibilityto Hiddenor the Witdhto 0px at startup without hiding the DataTrigger.ExitAction ?

Answer 1

Do you explicitly need to set the Visibility to Hidden if you're setting the Width to 0? A zero-width element and a hidden element look the same onscreen.
Your exit action is not being 'hidden', what's happening is the DataTrigger is 'undoing' the <Setter Property="Visibility" Value="Visible"/> in addition to running the exit action. But since the visibility has immediate effect you don't see the exit action being run.
Your enter action needs to both Visibility=Visible and start the expanding animation. Your exit action needs to perform the shrinking animation, but wait to set Visibility=Visible until after it's complete. You can do this with an ObjectAnimationUsingKeyFrames animation:
<Image.Style>
<Style TargetType="Image">
<Setter Property="Visibility" Value="Hidden"/>
<Setter Property="Width" Value="0"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsShown}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Animate the Width of the Image from 0 to 30px within 300ms-->
<DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="30" Duration="0:0:0.3"/>
<!-- Set the Image to Visible immediately -->
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!-- Animate the Width of the Image from 30 to 0px within 300ms-->
<DoubleAnimation Storyboard.TargetProperty="Width" From="30" To="0" Duration="0:0:0.3" />
<!-- After 300ms, hide the Image -->
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0.3" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>