WPF Animation Triggers Regardless of Property Value

Question

I am trying to make a smooth fade in/out animation for an inline alert box in a WPF form. The problem is that the animation seems to run even when the property is not set to the value expected in the trigger. I've put a breakpoint in the converter method and it never returns anything except Visibility.Hidden, however the trigger on Visibility.Visible is firing the animation of the Height property (may or may not be firing the one on opacity too but I couldn't tell since the Grid is Visibility.Hidden).

Here is the style:

<Style TargetType="Grid" x:Key="AlertStyle">
    <Setter Property="Visibility" Value="Collapsed"/>
    <Style.Triggers>
        <Trigger Property="Visibility" Value="Visible">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                         Duration="00:00:02" 
                                         BeginTime="00:00:00" 
                                         To="1.0" />
                        <DoubleAnimation Storyboard.TargetProperty="Height"
                                         Duration="00:00:01" 
                                         BeginTime="00:00:00" 
                                         To="60.0"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

The Grid in question is here:

<Grid DockPanel.Dock="Top" 
      Visibility="{Binding Path=Message, Converter={StaticResource NullToVis}}" 
      Style="{StaticResource AlertStyle}">
    <ContentPresenter Content="{Binding Path=Message, Mode=OneWay}"/>
</Grid>

The Value Converter:

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    return (value == null) ? Visibility.Hidden : Visibility.Visible;
}

When I add a second trigger to the <Style.Triggers> element neither animation ever runs.

The second trigger:

        <Trigger Property="Visibility" Value="Hidden">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                         Duration="00:00:01" 
                                         BeginTime="00:00:00" 
                                         To="0.0" />
                        <DoubleAnimation Storyboard.TargetProperty="Height"
                                         Duration="00:00:02" 
                                         BeginTime="00:00:00" 
                                         To="0.0"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>

I've never tried to do anything related to Animation in WPF before and I've found similar styles peppered all over the internet but haven't been able to modify any successfully to get them to do what I'm trying to accomplish.

Sheridan Sheridan · Accepted Answer · 2013-08-29T14:42:27

Try this:

<Style TargetType="Grid" x:Key="AlertStyle">
    <Setter Property="Visibility" Value="Collapsed"/>
    <Style.Triggers>
        <Trigger Property="Visibility" Value="Visible">
            <Trigger.EnterActions>
                <BeginStoryboard Name="Storyboard">
                    <Storyboard BeginTime="00:00:00">
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" 
Duration="00:00:02" To="1.0" />
                        <DoubleAnimation Storyboard.TargetProperty="Height" 
Duration="00:00:01" To="60.0"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <StopStoryboard BeginStoryboardName="Storyboard" />
            </Trigger.ExitActions>
        </Trigger>
    </Style.Triggers>
</Style>

If that doesn't work, then you can try using a DataTrigger with a custom Boolean value... you can't go too far wrong with that.

WPF Animation Triggers Regardless of Property Value

1 Answers