Прямоугольник WPF срабатывает, когда отображается для DoubleAnimation StoryBoard

Question

У меня есть DoubleAnimation, которая исчезает в прямоугольник в 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>

Это работает нормально, но я хочу, чтобы это происходило только тогда, когда прямоугольник виден. В настоящее время он анимируется (я полагаю) в фоновом режиме при загрузке.

Как я могу изменить его так, чтобы он запускал анимацию, когда она была видимой, и останавливался, когда она скрывалась / свернулась?

Или это не имеет значения? Я просто беспокоюсь, что это потребует ресурсов (для анимации), так как в приложении много прямоугольников, и большую часть времени они скрыты.

Благодарю.

Answer 1

Попробуй это

1-й метод

<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>

2-й метод

 <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>