为来自两个不同DataTriggers的同一属性设置动画

Question

I have a template where I want to animate a certain property (say, Opacity ) in response to different changes in the bound model object. Basically said object has two properties Enabled and Broken and depending on their values both could change the opacity.

This works fairly easy with setters:

<DataTemplate.Triggers>
    <DataTrigger Binding="{Binding Enabled}" Value="False">
        <Setter TargetName="X" Property="Opacity" Value="0.5"/>
    </DataTrigger>

    <DataTrigger Binding="{Binding Broken}" Value="True">
        <Setter TargetName="X" Property="Opacity" Value="0.5"/>
        <Setter TargetName="Y" Property="Visibility" Value="Visible"/>
    </DataTrigger>
</DataTemplate.Triggers>

because if both DataTriggers apply we just end up overwriting the value that's already 0.5 . However, with animations I haven't yet figured out how to properly do that. My initial approach was just to use

<DataTemplate.Triggers>
    <DataTrigger Binding="{Binding Enabled}" Value="False">
        <DataTrigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0:0:0.2"/>
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.EnterActions>
        <DataTrigger.ExitActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.ExitActions>
    </DataTrigger>

    <DataTrigger Binding="{Binding Broken}" Value="True">
        <Setter TargetName="Y" Property="Visibility" Value="Visible"/>

        <DataTrigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0:0:0.2"/>
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.EnterActions>
        <DataTrigger.ExitActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.ExitActions>
    </DataTrigger>
</DataTemplate.Triggers>

However, now the problem is that once the second trigger went through both storyboards the opacity is fixed to 1 with the first trigger not animating anything anymore. As far as I understood this is because the animation still lives on and overrides the value, and the first animation not changing. Changing the FillBehavior to Stop obviously solves that problem but then (equally obvious) Opacity reverts to its previous value after the animation.

I then tried using a Setter additional to the animation:

<DataTrigger Binding="{Binding Enabled}" Value="False">
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0:0:0.2"/>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>
    <DataTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.ExitActions>
    <Setter TargetName="X" Property="Opacity" Value="0.5"/>
</DataTrigger>

But then the first time Enabled changes the setter applies and the animation doesn't play. It does in subsequent changes, though.

Another try to get around both triggers animating the same property was to use To for the enter animation and From for the exit animation. Which seems to work. But if eg Enabled changes quickly enough, the enter animation is replaced by the exit animation which starts from opacity 0.5 , thus changing the opacity abruptly to 0.5 before animating back to whatever value it should animate to.

Somehow all options I've tried now either don't work or have little details that go wrong and I wasn't able to find good guidance on how to generally approach animating things in response to model changes, especially if those things also need to be animated in the other direction as well. Or, like in my case, even done so from two different property changes.

Answer 1

You may need to remove the storyboard applied via other data trigger so that the values are not locked by animations.

based on your input I attempted a sample for you

<ContentControl>
    <ContentControl.ContentTemplate>
        <DataTemplate>
            <Grid>
                <Ellipse Stretch="Uniform"
                         Fill="Gray"
                         x:Name="Y"
                         Visibility="Collapsed" />
                <Ellipse Stretch="Uniform"
                         Fill="Orange"
                         Margin="8"
                         x:Name="X" />
                <StackPanel HorizontalAlignment="Right">
                    <CheckBox Content="Enabled"
                              x:Name="enabled"
                              IsChecked="True" />
                    <CheckBox Content="Broken"
                              x:Name="broken" />
                </StackPanel>
            </Grid>
            <DataTemplate.Resources>
                <Storyboard x:Key="fadeOut">
                    <DoubleAnimation Storyboard.TargetName="X"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0.5"
                                     Duration="0:0:0.2" />
                </Storyboard>
                <Storyboard x:Key="fadeIn">
                    <DoubleAnimation Storyboard.TargetName="X"
                                     Storyboard.TargetProperty="Opacity"
                                     To="1"
                                     Duration="0:0:0.2" />
                </Storyboard>
            </DataTemplate.Resources>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding IsChecked,ElementName=enabled}"
                             Value="False">
                    <DataTrigger.EnterActions>
                        <RemoveStoryboard BeginStoryboardName="fadeIn2" />
                        <RemoveStoryboard BeginStoryboardName="fadeOut2" />
                        <BeginStoryboard Storyboard="{StaticResource fadeOut}"
                                         x:Name="fadeOut" />
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <RemoveStoryboard BeginStoryboardName="fadeIn2" />
                        <RemoveStoryboard BeginStoryboardName="fadeOut2" />
                        <BeginStoryboard Storyboard="{StaticResource fadeIn}"
                                         x:Name="fadeIn" />
                    </DataTrigger.ExitActions>
                </DataTrigger>

                <DataTrigger  Binding="{Binding IsChecked,ElementName=broken}"
                              Value="True">
                    <Setter TargetName="Y"
                            Property="Visibility"
                            Value="Visible" />
                    <DataTrigger.EnterActions>
                        <RemoveStoryboard BeginStoryboardName="fadeIn" />
                        <RemoveStoryboard BeginStoryboardName="fadeOut" />
                        <BeginStoryboard Storyboard="{StaticResource fadeOut}"
                                         x:Name="fadeOut2" />
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <RemoveStoryboard BeginStoryboardName="fadeIn" />
                        <RemoveStoryboard BeginStoryboardName="fadeOut" />
                        <BeginStoryboard Storyboard="{StaticResource fadeIn}"
                                         x:Name="fadeIn2" />
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ContentControl.ContentTemplate>
</ContentControl>

in above example you can see that I've used RemoveStoryboard action to remove storyboards applied by other trigger.

if the concern is just to smooth out the animation values, you can try HandoffBehavior="Compose" for BeginStoryboard

but seems like you've a little complex scenario you may perhaps create an attached behavior to animate the same based on your needs

---

Alternate approach

I did try to solve the issue by another approach

xaml

<ContentControl xmlns:l="clr-namespace:CSharpWPF">
    <ContentControl.ContentTemplate>
        <DataTemplate>
            <Grid>
                <Ellipse Stretch="Uniform"
                         Fill="Gray"
                         x:Name="Y"
                         Visibility="{Binding VisibilityY, ElementName=animation}" />
                <Ellipse Stretch="Uniform"
                         Fill="Orange"
                         Margin="8"
                         x:Name="X"
                         Opacity="{Binding OpacityX, ElementName=animation}" />
                <StackPanel HorizontalAlignment="Right">
                    <CheckBox Content="Enabled"
                              x:Name="enabled"
                              IsChecked="True" />
                    <CheckBox Content="Broken"
                              x:Name="broken" />
                    <l:CustomAnimation x:Name="animation"
                                       IsEnabled="{Binding IsChecked,ElementName=enabled}"
                                       IsBroken="{Binding IsChecked,ElementName=broken}" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ContentControl.ContentTemplate>
</ContentControl>

CustomAnimation class

namespace CSharpWPF
{
    public class CustomAnimation : FrameworkElement
    {
        public CustomAnimation()
        {
            IsEnabledProperty.OverrideMetadata(typeof(CustomAnimation), new UIPropertyMetadata(true, (s, e) => AnimateX(s as FrameworkElement, (bool)e.NewValue)));
        }

        static void AnimateX(FrameworkElement elem, bool fadeIn)
        {
            elem.BeginAnimation(OpacityXProperty, new DoubleAnimation(fadeIn ? 1 : 0.5, TimeSpan.FromSeconds(0.2)));
        }

        public bool IsBroken
        {
            get { return (bool)GetValue(IsBrokenProperty); }
            set { SetValue(IsBrokenProperty, value); }
        }

        // Using a DependencyProperty as the backing store for IsBroken.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IsBrokenProperty =
            DependencyProperty.Register("IsBroken", typeof(bool), typeof(CustomAnimation), new PropertyMetadata(false, (s, e) =>
                {
                    AnimateX(s as FrameworkElement, !(bool)e.NewValue);
                    s.SetValue(VisibilityYProperty, ((bool)e.NewValue) ? Visibility.Visible : Visibility.Collapsed);
                }));

        // Using a DependencyProperty as the backing store for XOpacity.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty OpacityXProperty =
            DependencyProperty.Register("OpacityX", typeof(double), typeof(CustomAnimation), new PropertyMetadata(1.0));

        // Using a DependencyProperty as the backing store for VisibilityY.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty VisibilityYProperty =
            DependencyProperty.Register("VisibilityY", typeof(Visibility), typeof(CustomAnimation), new PropertyMetadata(Visibility.Collapsed));
    }
}

try the sample above and see if this is what you expect