#686 – Using Animation to Make an Image Pulse

You can animate the opacity of an Image element to make it appear to pulse.  Below is one example of how to do this, using a Storyboard.  We animate the image’s Opacity property, down to 10% opaque over half a second and then back again.

    <StackPanel Margin="15">
        <CheckBox Content="Turn On" Margin="10" IsChecked="True"/>
        <StackPanel Orientation="Horizontal">
            <CheckBox Content="Tune In" Margin="10" VerticalAlignment="Center"/>
            <Image Name="funkyArrow" Source="Arrow.png" Margin="15,0">
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="funkyArrow"
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.1" Duration="0:0:0.5"
                                    AutoReverse="True" RepeatBehavior="Forever"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Image.Triggers>
            </Image>
        </StackPanel>
        <CheckBox Content="Drop Out" Margin="10"/>
    </StackPanel>