How to: Create Multiple Visual Effects

Multiple visual effects can be applied to a single visible object using the BitmapEffectGroup. The following example shows how to apply a BlurBitmapEffect and a DropShadowBitmapEffect to create a blurry button with a shadow behind it.

Example

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Effects;

namespace SDKSample
{
    public partial class MultipleEffectExample : Page
    {
        public MultipleEffectExample()
        {
            Button myButton = new Button();
            myButton.Content = "DropShadow under this Button";
            myButton.Margin = new Thickness(50);
            myButton.Width = 300;

            // Create the BitmapEffects to apply to the button.
            BlurBitmapEffect myBlurBitmapEffect = new BlurBitmapEffect();
            myBlurBitmapEffect.Radius = 2;

            DropShadowBitmapEffect myDropShadowBitmapEffect = new DropShadowBitmapEffect();
            myDropShadowBitmapEffect.Color = Colors.Black;
            myDropShadowBitmapEffect.Direction = 320;
            myDropShadowBitmapEffect.ShadowDepth = 30;
            myDropShadowBitmapEffect.Softness = 1;
            myDropShadowBitmapEffect.Opacity = 0.5;

            BitmapEffectGroup myBitmapEffectGroup = new BitmapEffectGroup();
            myBitmapEffectGroup.Children.Add(myBlurBitmapEffect);
            myBitmapEffectGroup.Children.Add(myDropShadowBitmapEffect);

            myButton.BitmapEffect = myBitmapEffectGroup;

            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Children.Add(myButton);
            this.Content = myStackPanel;

        }      
    }
}

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <StackPanel>

    <Button Margin="50" Width="300">
      DropShadow Under this Button
      <Button.BitmapEffect>
        <BitmapEffectGroup>
          <BlurBitmapEffect Radius="2" />
          <DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="30" Softness="1" 
           Opacity="0.5"/>
        </BitmapEffectGroup>
      </Button.BitmapEffect>
    </Button>

  </StackPanel>

</Page>

See Also

Tasks

How to: Create a Glow Effect on the Outer Edge of an Object

How to: Apply a Blur Effect to a Visual

How to: Create a Drop Shadow Visual Effect

How to: Animate Multiple Visual Effects

Concepts

Bitmap Effects Overview