Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You can't directly use the Visibility property for a fade out because setting a trigger on it will first Hide/Collapse the control, THEN animate it. So basically you'll got an animation on a collapsed control => nothing.</p> <p>One "reliable" way would be to introduce a new Dependency Property (attached or not), say <code>IsOpen</code> and setting a property trigger <code>IsOpen=True</code> on it with:</p> EnterAction: <ul> <li>Make sure Visibility is set to Visible</li> <li>Fade in the Opacity from 0 to 1</li> </ul> ExitAction: <ul> <li>Visibility set to Visible at keyframe 0 and Collapsed/Hidden at the last Keyframe</li> <li>Fade out the Opacity from 1 to 0.</li> </ul> <p>Here's an example:</p> <pre><code>&lt;Style TargetType="{x:Type local:TCMenu}"&gt; &lt;Style.Resources&gt; &lt;Storyboard x:Key="FadeInMenu"&gt; &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="{x:Null}"&gt; &lt;EasingDoubleKeyFrame KeyTime="0" Value="0"/&gt; &lt;EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="{x:Null}"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{x:Static Visibility.Visible}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;Storyboard x:Key="FadeOutMenu"&gt; &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="{x:Null}"&gt; &lt;EasingDoubleKeyFrame KeyTime="0" Value="1"/&gt; &lt;EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="{x:Null}"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{x:Static Visibility.Visible}"/&gt; &lt;DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/Style.Resources&gt; &lt;Style.Triggers&gt; &lt;Trigger Property="IsOpen" Value="true"&gt; &lt;Trigger.EnterActions&gt; &lt;BeginStoryboard Storyboard="{StaticResource FadeInMenu}"/&gt; &lt;/Trigger.EnterActions&gt; &lt;Trigger.ExitActions&gt; &lt;BeginStoryboard Storyboard="{StaticResource FadeOutMenu}"/&gt; &lt;/Trigger.ExitActions&gt; &lt;/Trigger&gt; &lt;/Style.Triggers&gt; &lt;Setter Property="Visibility" Value="Collapsed" /&gt; &lt;/Style&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload