Одинаковая анимация для нескольких названий целей

Question

Просто сомнение. У меня есть три изображения в моем приложении WPF. Я собираюсь дать эффект мерцания для этих трех изображений. Так что я дал этот код.

<Storyboard x:Key ="AlarmBlink">
       <DoubleAnimation
            Storyboard.TargetName="Img1"
            Storyboard.TargetProperty="Opacity"
      From="1" To="0" Duration="0:0:0.1" 
      AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>

Это для FirstImage (Img1). Так что я должен дать для двух других изображений. Могу ли я дать несколько имен taget в кодировании previus. В противном случае мне нужно скопировать и вставить ту же самую кодировку и изменить имя цели. Есть ли способ дать в одиночном кодировании?

Answer 1

Вы не можете поместить несколько Storyboard.TargetNames в DoubleAnimation, но есть лучший способ: используйте привязку данных, чтобы связать вместе три значения непрозрачности, затем анимируйте только одно из них, и другие также изменятся.

Примечание. Чтобы избежать асимметрии при создании привязок, вы можете использовать эту дополнительную технику:

1. Создайте четвертый элемент управления с Visibility = "Collapsed", чтобы вы никогда его не видели
2. Анимация непрозрачности этого элемента управления
3. Свяжите непрозрачность всех трех видимых элементов управления с непрозрачностью невидимого.

Другой вариант - использовать одну DoubleAnimation и использовать код, чтобы применить его ко всем трем изображениям вместо использования механизма StoryBoard WPF. Это дает вам гораздо больше контроля, но требует от вас написания кода.

Обычно я придерживаюсь связующего раствора, потому что он самый простой. В любом случае, решение типа «вырезать и вставить» обычно хуже всего.

Answer 2

Вы можете создать присоединяемое свойство многократного использования, которое может быть присоединено к любому элементу управления, производному от UIElement (поскольку именно там свойство Opacity определено на самом низком уровне), например так:

public class OpacityAnimation
{
    public static readonly DependencyProperty IsEnabledProperty = 
        DependencyProperty.RegisterAttached(
          "IsEnabled", typeof(bool), typeof(OpacityAnimation), new FrameworkPropertyMetadata(false, 
          FrameworkPropertyMetadataOptions.AffectsRender, IsEnabledChanged));

    public static void SetIsEnabled(DependencyObject element, bool value)
    {
        element.SetValue(IsEnabledProperty, value);
    }

    public static bool GetIsEnabled(DependencyObject element)
    {
        return (bool)element.GetValue(IsEnabledProperty);
    }

    private static void IsEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (!(d is UIElement uiElement))
            throw new Exception("DependencyObject has to be of type UIElement");

        if (e.NewValue is bool isEnabled && isEnabled)
        {
            var doubleAnimation = CreateAnimation(500);
            uiElement.BeginAnimation(UIElement.OpacityProperty, doubleAnimation);
        }
        else
        {
            uiElement.BeginAnimation(UIElement.OpacityProperty, null);
        }
    }

    private static AnimationTimeline CreateAnimation(int durationMs)
    {
        return new DoubleAnimation
        {
            FillBehavior = FillBehavior.Stop,
            RepeatBehavior = RepeatBehavior.Forever,
            AutoReverse = true,
            Duration = new Duration(TimeSpan.FromMilliseconds(durationMs)),
            From = 0,
            To = 1
        };
    }
}

Создайте этот класс в любом месте вашего проекта.

Затем, чтобы использовать его: (Не забудьте сослаться на ваше пространство имен в XAML)

<Path attachedProperties:OpacityAnimation.IsEnabled="{Binding IsBlinking}"
      Data="M 0,0 L 0,50 L 50,50 L 50,0" Fill="Red"/>

Таким образом, вы можете прикрепить это к любому свойству и привязать IsEnabled к свойству ViewModel для управления анимацией. Вам даже не нужен раскадровка для простых анимаций, подобных этой.

Прикрепленные свойства - фантастическая особенность WPF!

Answer 3

1. Определите StaticResource для вашего DoubleAnimation. (потому что вы не можете использовать раскадровку для нескольких элементов):

<Window.Resources>
   <DoubleAnimation x:Key="DA"
        Storyboard.TargetName="Img1"
        Storyboard.TargetProperty="Opacity"
        From="1" To="0" Duration="0:0:0.1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Window.Resources> 

2. Используйте этот ресурс для своих элементов и определите Storyboard.TargetName, используя RelativeSource Binding. например:

<Image Name="img1">
      <Image.Triggers>
           <EventTrigger RoutedEvent="Image.Loaded">
                <BeginStoryboard  >
                    <Storyboard Storyboard.TargetName="{Binding Name,RelativeSource={RelativeSource AncestorType=Image,Mode=FindAncestor}}">
                        <StaticResourceExtension ResourceKey="DA" />
                    </Storyboard>
                </BeginStoryboard>
           </EventTrigger>
       </Image.Triggers>
 </Image>