How to make a WPF button vibrate?

I am building a Windows WPF application that contains number of buttons. I want to notify the user that he should load a pdf before he can press other buttons by making the load pdf button blink / vibrate if the user clicks on other places and no pdf is loaded.

For example – The exact behavior happens on Microsoft Paint if you try to click anywhere outside of the edit colors box while it is open. (see attached gif)

Does anyone have an idea ?

enter image description here

Answer

You can use a storyboard with a DoubleAnimation, change the drop shadow, make it go back automatically and repeat it (here 4 times).

Here is a UserControl, which you can reuse for all buttons with such effect; you only need to replace the text “Button content” by some DependencyProperty to make it versatile.

<UserControl x:Class="AnimateDropShadow"
      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:d="http://schemas.microsoft.com/expression/blend/2008"
      mc:Ignorable="d">
    <Grid>
        <Button HorizontalAlignment="Left" >
            Button content
            <Button.Effect>
                <DropShadowEffect x:Name="warningEffect" Color="Black" BlurRadius="10"  ShadowDepth="0"/>
            </Button.Effect>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="warningEffect"
                                Storyboard.TargetProperty="BlurRadius"
                                From="15" To="10" Duration="0:0:0.1"
                                AutoReverse="True" RepeatBehavior="0:0:0.4" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</UserControl>

Leave a Reply

Your email address will not be published. Required fields are marked *