WPF Trigger animation when Visibility is changed?

Question

Well i have a custom control and when Visibility is changed to Visible I have a Trigger with a enter/exit action but the problem is that when the exit action fires the Visibility is no longer Visible so the animation can't be seen how would 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>

That's right. Tricky stuff. I'd solve this problem with attached properties + value coercion. Take a look here: [WPF Fade Animation](http://stackoverflow.com/questions/1013817/wpf-fade-animation/1015635#1015635). Hope this helps. Cheers, Anvaka. — Anvaka, Feb 18 '10 at 14:20
Does this have a fade animation in it? can i edit this so it only delays the hide/collapse until my animation is done? — Peter, Feb 18 '10 at 14:58
@Petoj, @jpierson: Of course you can do whatever you want with the code. It has build-in animation, and I would go with suggested approach in my sample. Because waiting for external animation to complete sounds like unnecessary complexity. Though if you really want to have it, you can make attached property value more sophisticated, and pass animation as one of its values... I feel like it's hard to give complete solution in this comment. If you need more, please post a question, and I'll give more elaborate answer :). — Anvaka, Jul 22 '10 at 08:53

score 3 · Accepted Answer · edited Sep 24 '11 at 17:47

3

I tried this too and failed. I think it is not possible to accomplish this in a simple ControlTemplate with a Trigger on the Visibility property. What you can do is add an Opacity animation From 1 To 0 to a Trigger for a different property, for instance a DependencyProperty that you add in the code behind yourself.

edited Sep 24 '11 at 17:47

Dave Clemmer

3,741
12
49
72

answered Feb 18 '10 at 21:44

Dabblernl

15,831
18
96
148

score 0 · Answer 2 · edited Sep 24 '11 at 17:48

0

You could also use ObjectAnimationUsingKeyFrames to set Visibility for animation period. In such case there is no need in any codebehind.

edited Sep 24 '11 at 17:48

Dave Clemmer

3,741
12
49
72

answered Jan 26 '11 at 16:05

user10341330

1

im not 100% sure but wouldent the HideStoryboard trigger the ShowStoryboard if it changed the value of Visibility? – Peter Jan 27 '11 at 09:47

score 0 · Answer 3 · answered Mar 15 '18 at 07:02

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

Don't use Visibility property, but use 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>

WPF Trigger animation when Visibility is changed?

3 Answers3