Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

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