wpfxamlresharperwpf-animationdoubleanimation

Use WPF DoubleAnimation multiple times (ReSharper shows error in XAML)


I want to use a DoubleAnimation multiple times. Here the code:

<Window x:Class="Project.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Window.Resources>
        <DoubleAnimation x:Key="LeftAnimation" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="100" />
        <DoubleAnimation x:Key="TopAnimation" Storyboard.TargetProperty="(Canvas.Top)" From="0" To="100" />
    </Window.Resources>

    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard Storyboard.TargetName="AnimatedBorder1">
                    <StaticResourceExtension ResourceKey="LeftAnimation" />
                </Storyboard>
            </BeginStoryboard>
            <BeginStoryboard>
                <Storyboard Storyboard.TargetName="AnimatedBorder2">
                    <StaticResourceExtension ResourceKey="LeftAnimation" />
                    <StaticResourceExtension ResourceKey="TopAnimation" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

    <Canvas>
        <Border x:Name="AnimatedBorder1" Background="Blue" Width="20" Height="20" />
        <Border x:Name="AnimatedBorder2" Background="Red" Width="20" Height="20" />
    </Canvas>

</Window>

The code works fine, but ReSharper underlines LeftAnimation in line <StaticResourceExtension ResourceKey="LeftAnimation" /> and says: "Invalid resource type: expected type is 'TriggerCollection', actual type is 'DoubleAnimation'."

Is that really a problem or is this a bug in ReSharper (version 9.2)?


Solution

  • Here is an editted solution:

    1. Resources:

      <Window.Resources>
      <TimelineCollection x:Key="TimelinesCollectionKey1">
          <DoubleAnimation  Storyboard.TargetProperty="(Canvas.Left)" From="0" To="100" />
      </TimelineCollection>
      <TimelineCollection x:Key="TimelinesCollectionKey2">
          <DoubleAnimation  Storyboard.TargetProperty="(Canvas.Top)" From="0" To="100" />
      </TimelineCollection></Window.Resources>
      
    2. Triggers:

      <Window.Triggers>
      <EventTrigger RoutedEvent="Window.Loaded">
          <BeginStoryboard>
              <Storyboard Storyboard.TargetName="AnimatedBorder1">
                  <!--<StaticResourceExtension ResourceKey="LeftAnimation" />-->
                  <Storyboard.Children>
                      <ParallelTimeline Children="{StaticResource TimelinesCollectionKey1}"></ParallelTimeline>
                  </Storyboard.Children>
              </Storyboard>
          </BeginStoryboard>
          <BeginStoryboard>
              <Storyboard Storyboard.TargetName="AnimatedBorder2">
                  <Storyboard.Children>
                      <ParallelTimeline Children="{StaticResource TimelinesCollectionKey1}"></ParallelTimeline>
                      <ParallelTimeline Children="{StaticResource TimelinesCollectionKey2}"></ParallelTimeline>
                  </Storyboard.Children>
              </Storyboard>
          </BeginStoryboard>
      </EventTrigger></Window.Triggers>
      
    3. Targets:

      <Canvas>
      <Border x:Name="AnimatedBorder1" Background="Blue" Width="20" Height="20" />
      <Border x:Name="AnimatedBorder2" Background="Red" Width="20" Height="20" /></Canvas>
      

    Regards,