When You Want A User To Notice A Button

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 Page Copy and overlays this image Page Highlight 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).

Tagged , . Bookmark the permalink.

About Mike

I'm a software engineer. Look into the about page for more information about me.

Comments are closed.