Question

I have ToggleButton with an OuterGlowBitmapEffect applied to it. I animate this glow to give it a pulsating effect, drawing peoples attention to it. My problem is, if I slow the animation down for the duration of a second, it stutters a lot. How can I prevent the stutter from occurring and what is it that’s causing it to not be smooth?

Here is the button:

<ToggleButton x:Name="btnMap1" Click="btnMap1_Click" Style="{DynamicResource GenericButton}" Width="152" Height="127" IsChecked="True">
    <ToggleButton.BitmapEffect>
        <OuterGlowBitmapEffect GlowColor="White" GlowSize="0" Noise="0" Opacity="1" />
    </ToggleButton.BitmapEffect>
</ToggleButton>

And here is the animation:

<Storyboard x:Key="ButtonGlow" RepeatBehavior="Forever" Timeline.DesiredFrameRate="30">
    <DoubleAnimation 
            BeginTime="00:00:00"
            Storyboard.TargetName="btnMap1"
            Storyboard.TargetProperty="(UIElement.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"
            From="0.0"
            To="10.0"
            Duration="0:0:1"
            AutoReverse="True"
            />
</Storyboard>

Answer 1

This effect is very CPU intensive, as it is software-rendered rather than GPU-generated.

Microsoft has deprecated this and similar effects and discourages their use.

Bitmap effects should not be applied
to large visuals or animations because
this can degrade performance.

They suggest using BlurEffect instead.