Visibility fadeout and fade in infinite loop

Question

I have some Grid with some element inside and I want to add it some fade in fade out effect with Visibility property in infinite loop base on some bool property. This is what I have tried:

<Grid.Style>
   <Style TargetType="FrameworkElement">
      <Setter Property="Visibility" Value="Visible"/>
      <Setter Property="Opacity" Value="0"/>
      <Style.Triggers>
         <Trigger Property="Visibility" Value="Collapsed">
            <Trigger.EnterActions>
               <BeginStoryboard>
                  <Storyboard>
                     <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                      From="0.0" 
                                      To="1.0"                                                                                    
                                      Duration="0:0:0.2"/>
                  </Storyboard>
               </BeginStoryboard>
            </Trigger.EnterActions>
         </Trigger>
      </Style.Triggers>
   </Style>
</Grid.Style>

Currently I cannot see my Grid at all.

Answer 1

There are a few issues in your style:

• You do not see the Grid, because you set the initial Opacity to 0.
• You can remove both of your Setters, because those are the default values
• Making the trigger dependent on Visibility does not work, because when it is set to Collapsed, the Grid is already invisible, so the animation is not even visible.
• There is no exit action to make the Grid fade in again.

You could solve the issues by exposing a property (here MyAnimationTriggerProperty) that you use as trigger for the animation. Depending o your actual application this could also be the IsChecked state of another control. Then you can add an ObjectAnimationUsingKeyFrames to set the Visibility at the end of the animation.

<Style TargetType="FrameworkElement">
   <Style.Triggers>
      <DataTrigger Binding="{Binding MyAnimationTriggerProperty}" Value="False">
         <DataTrigger.EnterActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                               From="1.0" 
                                               To="0.0"                                                                                    
                                               Duration="0:0:0.2"/>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
                     <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/>
                  </ObjectAnimationUsingKeyFrames>
               </Storyboard>
            </BeginStoryboard>
         </DataTrigger.EnterActions>
         <DataTrigger.ExitActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                               From="0.0" 
                                               To="1.0"                                                                                    
                                               Duration="0:0:0.2"/>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
                     <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                  </ObjectAnimationUsingKeyFrames>
               </Storyboard>
            </BeginStoryboard>
         </DataTrigger.ExitActions>
      </DataTrigger>
   </Style.Triggers>
</Style>