WPF Trigger animation when visibility changes?

Question

Well, I have a custom control, and when Visibility changed to Visible , I have a Trigger with an I / O action, but the problem is that when the exit action fires, Visibility no longer Visible , so the animation cannot be seen as can i fix this?

here is my Trigger :

 <ControlTemplate.Triggers> <Trigger Property="Visibility" Value="Visible"> <Trigger.ExitActions> <BeginStoryboard Storyboard="{StaticResource Hide}"/> </Trigger.ExitActions> <Trigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource Show}"/> </Trigger.EnterActions> </Trigger> </ControlTemplate.Triggers> 

Answer 1

I also tried this and failed. I think this cannot be done in a simple ControlTemplate with the Trigger in the Visibility property. What you can do is add an Opacity animation from 1 to 0 to Trigger for another property, like DependencyProperty , which you add to the code behind you.

Answer 2

You can also use ObjectAnimationUsingKeyFrames to set Visibility for the animation period. In this case, no code is needed.

Answer 3

There is a way to achieve this. Not 100% clean, but works for me:

Do not use the Visibility property, but use the Opacity and Tag property.

 <ListView.Resources> <Style TargetType="{x:Type ListViewItem}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListViewItem}"> <Border CornerRadius="5" BorderThickness="2" BorderBrush="DodgerBlue" Background="#CC4f9dea" > <Grid> <ContentPresenter HorizontalAlignment="Stretch" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Stretch" /> <Button x:Name="btnClose" Opacity="0" Content="X" Style="{StaticResource RoundedButtonStyle}"/> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Tag" TargetName="btnClose" Value="Visible" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListView.Resources> <Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border CornerRadius="15" Background="White" BorderThickness="1" Padding="2" BorderBrush="Black"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="Tag" Value="Visible"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="0.5" Duration="0:0:0.5"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.5" To="0.0" Duration="0:0:0.5"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </Style.Triggers> </Style>