wpf - Advanced XAML Animation effects. Pulse, Marching ants, Rotations. Alerts -

i have list of alarms. when alarms activated has been requested make them more noticeable. when alarms status changes wanted create pulsing outer glow around item few seconds , have disappear.

the problem having can't seem make dropshadoweffect appear when need it. tried setting opacity 0 , color transparent seems disable animation. considered adding effect in style trigger i'm not sure how remove when animation done?

any advice on how accomplish this?

<rectangle grid.column="1" grid.row="0">         <rectangle.effect>         <dropshadoweffect shadowdepth="0" blurradius="0" opacity="0" color="white"    />      </rectangle.effect>    <rectangle.style> <style>     <style.triggers>         <datatrigger binding="{binding value, converter={staticresource alarmconverter}, isasync=true}" value="true">             <datatrigger.enteractions>                <beginstoryboard>                    <storyboard fillbehavior="stop" >                        <doubleanimation storyboard.targetproperty="effect.opacity" to="1" fillbehavior="stop" />                         <coloranimation storyboard.targetproperty="effect.color" to="white" fillbehavior="stop" />                         <doubleanimation storyboard.targetproperty="effect.blurradius" from="0" to="20" repeatbehavior="3x" fillbehavior="stop" />                                                                                </storyboard>               </beginstoryboard>           </datatrigger.enteractions>       </datatrigger> 

update here's example of section of screen looks like. had remove text , other aspects screenshot due security concerns, apologies. replaced of them generic text still provide context. thing note in general isn't ran on normal monitors. displayed along side other screens on long, large video wall.

the alarm words binding limits (the first word removed, text doesn't sit on that) has reasonable animated rolling gradient replaced simple flashing. additionally alarm status in case causes shape spin.

the feedback when alarm status changes first time (from green yellow or orange red etc) additional indication. had few different ideas. first try animating text cause expand little pulsing. when tried expands right , down , didn't give "swelling" effect had hoped for.

another idea asked here possibly animate glowing border around alarm item. bright , dim 3 or 4 times when status changed. open other ideas however. animation abilities in wpf finding difficulty in using articulate ideas. (something think come time)

update tried animating stroke , strokethickness effect , while helps glow stand out border way hard , noticible, when alarm color red.

<beginstoryboard>      <storyboard fillbehavior="stop">          <doubleanimation storyboard.targetproperty="strokethickness" to="2"   />          <coloranimation storyboard.targetproperty="stroke.color" to="white"  />          <doubleanimation storyboard.targetproperty="effect.opacity" to="30"   />          <coloranimation storyboard.targetproperty="effect.color" to="white"  />          <doubleanimation storyboard.targetproperty="effect.blurradius" from="0" to="100" autoreverse="true"  duration="00:00:02" repeatbehavior="3x" />                                                                  </storyboard> </beginstoryboard> 

update demo'd outer glow alarm whole , deemed subtle. i'm entertaining idea of dancing 7up dot @ point... (not really)

ok amigo, took 15-20mins morning go ahead , throw few random examples of styles i've used in past notification type stuff. i'm guessing mock show real rough example, without knowing more precisely looks it's difficult match style designer want to.

however, imagine use these examples creative juices flowing on how/what route go, , taste of of things can real quick , easily. if want prettier/more precise example you'll have share real screens etc. animations , stuff apply other objects icon , stuff example threw them @ boxes.

these own bag of tricks, use them freely, have tons more different techniques show if ya want if involved, sort of in depth advice how make living, may have @ least charge ya case of beer or ;)

anyhow, throw in window, did fresh quick wpf proj. you'll paste them in , run it, they're set start on load.

main thing i've found avoid, messing heavily gradients , various pixel shader stuff in mass animations. stuff seems fine.

output (in choppy .gif animated style anyway visual example.):

and magic:

<window     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:class="mainwindow"     title="mainwindow" height="450" width="250">     <window.resources>          <!-- marching ants -->         <storyboard x:key="marchingants">                 <doubleanimation begintime="00:00:00"                                 storyboard.targetname="alertbox"                                 storyboard.targetproperty="strokethickness"                                 to="4"                                 duration="0:0:0.25" />                            <!-- if want run counter-clockwise, swap 'from' , 'to' values. -->                 <doubleanimation begintime="00:00:00" repeatbehavior="forever" storyboard.targetname="alertbox" storyboard.targetproperty="strokedashoffset"                                  duration="0:3:0" from="1000" to="0"/>         </storyboard>          <!-- pulse -->         <storyboard x:key="pulse" repeatbehavior="forever">             <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[0].(scaletransform.scalex)" storyboard.targetname="pulsebox">                 <easingdoublekeyframe keytime="0:0:0.5" value="1.15"/>                 <easingdoublekeyframe keytime="0:0:1" value="1"/>             </doubleanimationusingkeyframes>             <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[0].(scaletransform.scaley)" storyboard.targetname="pulsebox">                 <easingdoublekeyframe keytime="0:0:0.5" value="1.15"/>                 <easingdoublekeyframe keytime="0:0:1" value="1"/>             </doubleanimationusingkeyframes>         </storyboard>          <!-- flipper -->         <storyboard x:key="flipper" repeatbehavior="forever">             <pointanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransformorigin)" storyboard.targetname="flipperbox">                 <easingpointkeyframe keytime="0:0:1" value="0.5,0.5"/>                 <easingpointkeyframe keytime="0:0:2" value="0.5,0.5"/>             </pointanimationusingkeyframes>             <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[0].(scaletransform.scaley)" storyboard.targetname="flipperbox">                 <easingdoublekeyframe keytime="0:0:1" value="-1"/>                 <easingdoublekeyframe keytime="0:0:2" value="1"/>             </doubleanimationusingkeyframes>         </storyboard>           <!-- elasic lines -->         <storyboard x:key="elasticlines" repeatbehavior="forever" autoreverse="true">             <pointanimationusingkeyframes storyboard.targetproperty="(shape.fill).(lineargradientbrush.endpoint)" storyboard.targetname="elasticbox">                 <easingpointkeyframe keytime="0:0:4" value="12,8"/>             </pointanimationusingkeyframes>         </storyboard>          <!-- knight rider -->         <storyboard x:key="knightrider" repeatbehavior="forever" autoreverse="true">             <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" storyboard.targetname="krbox">                 <easingdoublekeyframe keytime="0:0:1" value="-50"/>                 <easingdoublekeyframe keytime="0:0:2" value="50"/>                 <easingdoublekeyframe keytime="0:0:3" value="0"/>             </doubleanimationusingkeyframes>         </storyboard>      </window.resources>     <window.triggers>         <eventtrigger routedevent="frameworkelement.loaded">             <beginstoryboard storyboard="{staticresource pulse}"/>             <beginstoryboard storyboard="{staticresource marchingants}"/>             <beginstoryboard storyboard="{staticresource flipper}"/>             <beginstoryboard storyboard="{staticresource elasticlines}"/>             <beginstoryboard storyboard="{staticresource knightrider}"/>         </eventtrigger>     </window.triggers>      <grid horizontalalignment="center" verticalalignment="center">         <grid.resources>             <style targettype="{x:type textblock}">                 <setter property="foreground" value="white"/>                 <setter property="fontweight" value="bold"/>                 <setter property="fontsize" value="35"/>                 <setter property="horizontalalignment" value="center"/>                 <setter property="verticalalignment" value="center"/>                 <setter property="text" value="alert"/>             </style>             <style targettype="{x:type grid}">                 <setter property="margin" value="0,10"/>                             </style>             <style targettype="{x:type rectangle}">                 <setter property="height" value="50"/>                 <setter property="width" value="150"/>             </style>         </grid.resources>          <stackpanel>          <!-- marching ants -->         <grid>              <rectangle x:name="alertbox"                       stroke="red"                         strokedashoffset="2" strokedasharray="5" margin="5">                 <rectangle.fill>                     <lineargradientbrush startpoint="0,0" endpoint="6,4" mappingmode="absolute" spreadmethod="repeat">                         <gradientstop color="red" offset="0.25"/>                         <gradientstop color="#00000000" offset="0.15"/>                     </lineargradientbrush>                 </rectangle.fill>             </rectangle>              <textblock/>          </grid>         <!-- end marching ants -->           <!-- pulse : not skew other elements location width/height animations would. -->         <grid>             <border x:name="pulsebox"                         background="red" rendertransformorigin="0.5,0.5">                 <border.rendertransform>                     <transformgroup>                         <scaletransform/>                         <skewtransform/>                         <rotatetransform/>                         <translatetransform/>                     </transformgroup>                 </border.rendertransform>                  <textblock/>              </border>         </grid>         <!-- end pulse -->           <!-- flipper -->         <grid>             <border x:name="flipperbox"                         background="red">                 <border.rendertransform>                     <transformgroup>                         <scaletransform/>                         <skewtransform/>                         <rotatetransform/>                         <translatetransform/>                     </transformgroup>                 </border.rendertransform>                  <textblock/>              </border>         </grid>         <!-- end flipper -->           <!-- elastic lines -->         <grid>             <rectangle x:name="elasticbox"                       stroke="red" strokethickness="5" margin="5">                 <rectangle.fill>                     <lineargradientbrush startpoint="0,0" endpoint="6,4" mappingmode="absolute" spreadmethod="repeat">                         <gradientstop color="red" offset="0.25"/>                         <gradientstop color="#00000000" offset="0.15"/>                     </lineargradientbrush>                 </rectangle.fill>             </rectangle>              <textblock/>          </grid>         <!-- end elastic box -->           <!-- knight rider -->         <grid>             <rectangle fill="red"/>             <rectangle x:name="krbox" width="50" fill="white" rendertransformorigin="0.5,0.5">                 <rectangle.rendertransform>                     <transformgroup>                         <scaletransform/>                         <skewtransform/>                         <rotatetransform/>                         <translatetransform/>                     </transformgroup>                 </rectangle.rendertransform>             </rectangle>              <textblock foreground="red"/>          </grid>         <!-- end knight rider -->          </stackpanel>      </grid> </window>