WPF Rectangle Triggers when Visible for DoubleAnimation StoryBoard

Question

I have a DoubleAnimation which fades in/out a Rectangle in WPF

<Canvas>
    <Rectangle Height="150" Width="150">
        <Rectangle.Fill>
            <SolidColorBrush x:Name="OpacityBrush" Color="DarkBlue" />
        </Rectangle.Fill>

        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
                <BeginStoryboard>
                    <StoryBoard>
                        <DoubleAnimation Storyboard.TargetName="OpacityBrush" Storyboard.TargetProperty="Opacity" From="0.0" To="0.6" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
                        <DoubleAnimation Storyboard.TargetName="OpacityBrush" Storyboard.TargetProperty="Opacity" From="0.6" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />

                    </StoryBoard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Canvas>

This works fine but I want this to happen only when the rectangle is visible. Currently, it animates (I assume) in the background when it loads.

How can I change it so that it would start animation when it is visible and stop when it is hidden/collapse?

Or does it not matter? I'm just worried that it would take up resources (for the animation) as there are a lot of rectangles in the application and most of the time they are hidden.

Thanks.

Answer 1

Try this

1st Method

<Canvas>
    <Rectangle Height="150"  Width="150">
        <Rectangle.Fill>
            <SolidColorBrush x:Name="OpacityBrush" Color="DarkBlue" />
        </Rectangle.Fill>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
                <BeginStoryboard>
                    <Storyboard Name="Anm">
                        <DoubleAnimation Storyboard.TargetName="OpacityBrush" Storyboard.TargetProperty="Opacity" From="0.0" To="0.6" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
                        <DoubleAnimation Storyboard.TargetName="OpacityBrush" Storyboard.TargetProperty="Opacity" From="0.6" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
        <Rectangle.Style>
            <Style>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Source={RelativeSource Self}, Path=Visibility}" Value="{x:Static Visibility.Collapsed}">
                        <DataTrigger.EnterActions>
                            <StopStoryboard BeginStoryboardName="Anm"/>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
    </Rectangle>
</Canvas>

2nd Method

 <Canvas>
    <Rectangle Height="150"  Width="150">
        <Rectangle.Fill>
            <SolidColorBrush x:Name="OpacityBrush" Color="DarkBlue" />
        </Rectangle.Fill>
        <Rectangle.Style>
            <Style TargetType="Rectangle">
                <Style.Triggers>
                    <Trigger Property="Visibility" Value="Visible">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard Name="Anm">
                                    <DoubleAnimation  Storyboard.TargetProperty="Opacity" From="0.0" To="0.6" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
                                    <DoubleAnimation  Storyboard.TargetProperty="Opacity" From="0.6" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="Anm"></StopStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
    </Rectangle>
</Canvas>