Fading out a WPF control on Visibility.Hidden

Question

I'd like to use style to make a WPF control (in this case a 3rd party one from Telerik, but could be anything) fade out as it's Visibility property is changed to Hidden. This approach I'm trying to use works well for fading in content after it's set to Visibility.Visible. But this does NOT work the opposite way:

<Style x:Key="FadeoutStyle" TargetType="telerik:RadDiagramShape">
    <Style.Triggers>              
        <Trigger Property="Visibility" Value="Hidden">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                 From="1.0" To="0.0" Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>               
    </Style.Triggers>
</Style>

I'm pretty sure of why this doesn't work: as soon as the control is set to Hidden, WPF stops drawing it. So my animation might even be playing, but it's not showing because Visibility.Hidden immediately got applied.

Question 1: Is my assumption correct? Question 2: What is a good pattern to work around this? I can imagine a solution where a custom property initiates the fadeout anim and uses a callback once done that applies the actual Visibility.Hidden setting. Is there a cleaner solution?

Drakestar Drakestar · Accepted Answer · 2017-06-04T03:40:28

Visibility.Hidden issues aside, ultimately it turned out that I was using the trigger incorrectly. My working version (using a different property) looks like this:

  <Trigger Property="IsEnabled" Value="False">
      <Trigger.EnterActions>
          <BeginStoryboard>
              <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2"/>
              </Storyboard>
          </BeginStoryboard>
      </Trigger.EnterActions>
      <Trigger.ExitActions>
          <BeginStoryboard>
              <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
              </Storyboard>
          </BeginStoryboard>
      </Trigger.ExitActions>
  </Trigger>

Fading out a WPF control on Visibility.Hidden

1 Answers