Animated UserControl : StoryBoard not starting? - wpf

Question

I'm trying to create an animation in one of my apps.
The animation is a Control that has a StoryBoard defined in its Resources and starts this StoryBoard after it's been loaded. Here's the (somewhat stripped) XAML:
<UserControl x:Class="LernInsel.Resources.Assets.Water" x:Name="UserControl">
<UserControl.Resources>
<Storyboard x:Key="BaseAnimation" x:Name="BaseAnimation" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0.45"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0.45"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.39"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.39"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.41"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.41"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy2">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0.35"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy2">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0.35"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource BaseAnimation}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid>
<Rectangle x:Name="Background" Fill="#FF0B5FBC" Height="88" VerticalAlignment="Top"/>
<Rectangle x:Name="waveLeft" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="25.5,6,286.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="308.5,6,3.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="-3.5,15,315.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="279.5,15,32.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy1" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="45.5,25,266.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy1" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="0,25,-16.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy2" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="-3.5,38,315.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy2" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="279.5,38,32.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
</Grid>
</UserControl>
When I create an instance of this on my Window, this looks fine in the designer, even the animation is being displayed. At Runtime, the Control is displayed as a unicolor Box (background color), but the animation never starts. Do you see anything wrong with the way Blend created the Trigger that might keep it from working?
Thanks a lot in advance!
Sebi

Answer 1

Cannot reproduce this, given that waveBright is actually defined in a reachable scope of your UserControl. This might be the only weakness of that code.