HTML Got Rid Of Blink
But that doesn’t mean you can’t reproduce it. Well, I’m not using HTML; I’m using WPF. Our users were consistently missing a button because they would get into a click-through freenzy. I decided to make it standout a little more with this code:
<Button x:Name="btn16x16"
Click="Button_Click"
Command="{Binding Path=ClipboardClickCommand}"
Cursor="Hand"
ToolTip="Copy Summary Content to Clipboard">
<Button.Template>
<ControlTemplate>
<Canvas Width="18" Height="18">
<Image Name="imgCopyHiglight"
Width="18"
Height="18"
Panel.ZIndex="1"
Source="/Installer;component/Resources/Images/copyHighlight.png">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard Name="BeginImgStoryboard">
<Storyboard>
<DoubleAnimation AutoReverse="True"
Duration="0:0:0.5"
From="1.0"
RepeatBehavior="Forever"
Storyboard.TargetName="imgCopyHiglight"
Storyboard.TargetProperty="Opacity"
To="0.0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseDown">
<StopStoryboard BeginStoryboardName="BeginImgStoryboard" />
<BeginStoryboard>
<Storyboard>
<DoubleAnimation AutoReverse="False"
Duration="0:0:0.5"
From="1.0"
Storyboard.TargetName="imgCopyHiglight"
Storyboard.TargetProperty="Opacity"
To="0.0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
<Image Name="imgCopy"
Canvas.Left="1"
Canvas.Top="1"
Width="16"
Height="16"
Source="/Installer;component/Resources/Images/page_copy.png" />
</Canvas>
</ControlTemplate>
</Button.Template>
</Button>
What Does That Do?
It takes this image
and overlays this image
on top of it. The opacity of the image changes from 1 to 0 to 1 every 1/2 second. Of course, you switch the Panel.ZOrder from the highlight image to the other image and it will give a red glow outline to your pulse. The pulse also stops when the user performs a MouseDown event (to click the button).