How to programmatically add and remove bitmap effect storyboard to ContentControl

Question

I have the following behavior which is unfinished. Please note that TransitionElement is basically a ContentControl.

I would like to create two storyboards that use BlurBitmapEffect to blur and unblur the control.

If the ContentControl Enabled property is set to false, I would like to add the storyboards and begin the blur.

If Enabled is set to true, I would like to run a storyboard that unblurs the control and once finished removes both storyboards, effectively removing any bitmap effects.

class ContentControlBehavior : Behavior<TransitionElement>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.IsEnabledChanged += AssociatedObject_IsEnabledChanged;
    }
    protected override void OnDetaching()
    {
        AssociatedObject.IsEnabledChanged -= AssociatedObject_IsEnabledChanged;
        base.OnDetaching();
    }
    void AssociatedObject_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        if ((bool)e.NewValue == false)
        {
            //Blur
        }
        else
        {
            //UnBlur and remove storyboards and any bitmap effects.
        }
    }
}

I am doing this when I lock and unlock my application.

I found doing it through XAML with styles had a huge impact on graphical performance. Then I found some notes below. So I figure why not apply these storyboards and then remove them altogther.

Be careful using WPF bitmap effects. At the time I'm writing this, WPF bitmap effects are rendered in software mode. Any object that applies an effect will also be rendered in software. Bitmap effects should not be applied to large visuals. Also, animating properties of an effect can degrade performance. At this time, I suggest that you use bitmap effects sparingly and use them on relatively small visual UI objects like buttons, text boxes, etc. Feel free to animate effects, but again, I recommend relatively small, subtle animations.

I have just noticed that BitmapEffect is depreciated and Effect is the one to use.

just a small question, why you would want to remove the effect from the element? setting radius to 0 will effectively disable it. I am asking because the animation will usually take some time to blur and unblur and you can only remove the effect after the unblur animation completes, but there are chances that the element become disable again and you have to start the blur animation. then it will be confusing to choose whether to remove the effect after previous unblur complete or weather to start the new blur animation. — pushpraj, Jun 28 '14 at 04:40

score 1 · Accepted Answer · answered Jun 28 '14 at 04:52

here is a solution if you do not want to remove the storyboard at the end of unblur

assuming TransitionElement is a kind of FrameworkElement below is a sample.

class ContentControlBehavior : Behavior<TransitionElement>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.IsEnabledChanged += AssociatedObject_IsEnabledChanged;
        // add effect to element
        BlurEffect effect = new BlurEffect() { Radius = 0 };
        AssociatedObject.Effect = effect;
    }
    protected override void OnDetaching()
    {
        AssociatedObject.IsEnabledChanged -= AssociatedObject_IsEnabledChanged;
        base.OnDetaching();
        //remove the effect
        AssociatedObject.Effect = null;
    }
    void AssociatedObject_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        if ((bool)e.NewValue == false)
        {
            //Blur
            BlurEffect effect = AssociatedObject.Effect as BlurEffect;
            effect.BeginAnimation(BlurEffect.RadiusProperty, new DoubleAnimation(10, TimeSpan.FromSeconds(0.5)));
        }
        else
        {
            //UnBlur
            BlurEffect effect = AssociatedObject.Effect as BlurEffect;
            effect.BeginAnimation(BlurEffect.RadiusProperty, new DoubleAnimation(0, TimeSpan.FromSeconds(0.25)));
        }
    }
}

in above example invoking BeginAnimation effectively removes any previous animation from the targeted property, however last one remain, but that is on the effect and will be removed as the behavior is Detached.

How to programmatically add and remove bitmap effect storyboard to ContentControl

1 Answers1