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).