Databases
StackOverflow2013
Postsdbo
POHow to make an element reference a StaticResource Storyboard in XAML (instead of the storyboard referencing the element)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make an element reference a StaticResource Storyboard in XAML (instead of the storyboard referencing the element)
    text
    copied!<p>I am reading the MSDN Animation tutorial, and it describes the following steps to apply a storyboard to an element:</p> <ol> <li>Create the Storyboard;</li> <li>Specify its target element name with the <code>TargetName</code> property;</li> <li>(Specify the target property);</li> <li>(Add an event trigger to start the animation);</li> </ol> <p>I see a conceptual problem, from which derives my difficulty, that's this:</p> <blockquote> <p>I have a one-to-one relationship between storyboard and element, and this relationship is defined in the storyboard. Then, how could I create ONE storyboard, and conditionally apply it to more than one element, triggering the animation FROM THE ELEMENT ITSELF (via Binding / Triggers, I suppose).</p> </blockquote> <p>My intended use case is to mimmick a panel of leds (a stackpanel of ellipses) where each led can be in one of four logical states: on, off, blinking fast, and blinking slow (pretty much like ethernet routers do). Then, I'd create the animations <code>BlinkingSlow</code> and <code>BlinkingFast</code>, which would then be triggered when my ViewModel entered the respective logical states. Then I could just care about behavior in the ViewModel and let the View take care of itself, with proper triggering and reuse of a few StaticResource Storyboards.</p> <pre><code>&lt;Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:local="clr-namespace:blinking" x:Class="blinking.MainWindow" Title="MainWindow" Background="{x:Null}" WindowStartupLocation="CenterScreen"&gt; &lt;Window.Resources&gt; &lt;System:Double x:Key="Diameter"&gt;40&lt;/System:Double&gt; &lt;Color x:Key="RedOn"&gt;Red&lt;/Color&gt; &lt;Color x:Key="RedOff"&gt;#FF570000&lt;/Color&gt; &lt;Storyboard x:Key="BlinkSlow" RepeatBehavior="Forever"&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="led4" AutoReverse="True" RepeatBehavior="Forever"&gt; &lt;DiscreteColorKeyFrame KeyTime="0" Value="{StaticResource RedOn}"/&gt; &lt;DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="{StaticResource RedOn}"/&gt; &lt;EasingColorKeyFrame KeyTime="0:0:0.5" Value="{StaticResource RedOff}"/&gt; &lt;DiscreteColorKeyFrame KeyTime="0:0:1" Value="{StaticResource RedOff}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/Window.Resources&gt; &lt;Window.Triggers&gt; &lt;EventTrigger RoutedEvent="FrameworkElement.Loaded"&gt; &lt;BeginStoryboard Storyboard="{StaticResource BlinkSlow}"/&gt; &lt;/EventTrigger&gt; &lt;/Window.Triggers&gt; &lt;StackPanel x:Name="leds_container" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,4,0"&gt; &lt;Ellipse x:Name="led1" Width="{StaticResource Diameter}" Height="{StaticResource Diameter}" Fill="#FFF90F0F" Margin="20,0,0,0"/&gt; &lt;Ellipse x:Name="led2" Width="{StaticResource Diameter}" Height="{StaticResource Diameter}" Fill="#FFF90F0F" Margin="20,0,0,0"/&gt; &lt;Ellipse x:Name="led3" Width="{StaticResource Diameter}" Height="{StaticResource Diameter}" Fill="#FFF90F0F" Margin="20,0,0,0"/&gt; &lt;Ellipse x:Name="led4" Width="{StaticResource Diameter}" Height="{StaticResource Diameter}" Fill="#FFF90F0F" Margin="20,0,0,0"/&gt; &lt;/StackPanel&gt; &lt;/Window&gt; </code></pre> <p>Any suggestion?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload