Share via

  • Article

DropShadowEffect Class

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Applies a shadow behind a visual object at a slight offset. The offset is determined by mimicking a casting shadow from an imaginary light source.

Inheritance Hierarchy

System.Object
  System.Windows.DependencyObject
    System.Windows.Media.Effects.Effect
      System.Windows.Media.Effects.DropShadowEffect

Namespace:  System.Windows.Media.Effects
Assembly:  System.Windows (in System.Windows.dll)

Syntax

'Declaration
Public NotInheritable Class DropShadowEffect _
    Inherits Effect

public sealed class DropShadowEffect : Effect

<DropShadowEffect .../>

The DropShadowEffect type exposes the following members.

Constructors

  Name Description
Public method DropShadowEffect Initializes a new instance of the DropShadowEffect class.

Top

Properties

  Name Description
Public property BlurRadius Gets or sets how defined the edges of the shadow are (how blurry the shadow is).
Public property Color Gets or sets the color of the shadow.
Public property Direction Gets or sets the angle at which the shadow is cast.
Public property Dispatcher Gets the Dispatcher this object is associated with. (Inherited from DependencyObject.)
Protected property EffectMapping When overridden in a derived class, transforms mouse input and coordinate systems through the effect. (Inherited from Effect.)
Public property Opacity Gets or sets the degree of opacity of the shadow.
Public property ShadowDepth Gets or sets the distance between the object and the shadow that it casts.

Top

Methods

  Name Description
Public method CheckAccess Determines whether the calling thread has access to this object. (Inherited from DependencyObject.)
Public method ClearValue Clears the local value of a dependency property. (Inherited from DependencyObject.)
Public method Equals(Object) Determines whether the specified Object is equal to the current Object. (Inherited from Object.)
Protected method Finalize Allows an object to try to free resources and perform other cleanup operations before the Object is reclaimed by garbage collection. (Inherited from Object.)
Public method GetAnimationBaseValue Returns any base value established for a Silverlight dependency property, which would apply in cases where an animation is not active. (Inherited from DependencyObject.)
Public method GetHashCode Serves as a hash function for a particular type. (Inherited from Object.)
Public method GetType Gets the Type of the current instance. (Inherited from Object.)
Public method GetValue Returns the current effective value of a dependency property from a DependencyObject. (Inherited from DependencyObject.)
Protected method MemberwiseClone Creates a shallow copy of the current Object. (Inherited from Object.)
Public method ReadLocalValue Returns the local value of a dependency property, if a local value is set. (Inherited from DependencyObject.)
Public method SetValue Sets the local value of a dependency property on a DependencyObject. (Inherited from DependencyObject.)
Public method ToString Returns a string that represents the current object. (Inherited from Object.)

Top

Fields

  Name Description
Public fieldStatic member BlurRadiusProperty Identifies the BlurRadius dependency property.
Public fieldStatic member ColorProperty Identifies the Color dependency property.
Public fieldStatic member DirectionProperty Identifies the Direction dependency property.
Public fieldStatic member OpacityProperty Identifies the Opacity dependency property.
Public fieldStatic member ShadowDepthProperty Identifies the ShadowDepth dependency property.

Top

Remarks

The following illustration shows a DropShadowEffect applied to a visual object (in this case, applied to a Button).

Button with a DropShadow applied to it.

In addition to creating a drop shadow by using DropShadowEffect, you can create blur effects by using BlurEffect.

You can apply only one effect directly to an element at a time. For example, you cannot apply a BlurEffect and a DropShadowEffect to the same element directly. However, you can apply an effect to the container of an element and therefore apply the effect to the nested child. For instance, you could apply a DropShadowEffect to a Button and then apply a BlurEffect to a Grid that contains the Button. This would create a blurry button with a drop shadow. However, stacking effects on one another in this way may have adverse effects on the performance of your application.

Note   Silverlight shader effects are rendered in software mode. Any object that applies an effect will also be rendered in software. Performance is degraded the most when using effects on large visuals or animating properties of an effect. This is not to say that you should not use shader effects in this way at all, but you should use caution and test thoroughly to ensure that your users are getting the experience you expect.

Examples

The following examples show the following:

  • How to use simple markup to apply a DropShadowEffect to an object by using XAML.

  • How to use a Style to apply the effect to one or more objects.

  • How to use code to apply the effect to an object.

  • How to use an animation to animate the properties of an effect applied to an object.

The following example shows how to use a DropShadowEffect to create a Button with a DropShadowEffect.

Run this sample

<StackPanel>
    <Button Content="Drop Shadow Under Me" Width="200" Margin="10">
        <Button.Effect>

            <!-- The DropShadowEffect has several important properties that
           determine characteristics of the drop shadow: 
         - Color: Specifies the color of the drop shadow. Default is black.
         - ShadowDepth: Specifies how far displaced the shadow is from the object
           casting the shadow. Default is 5.
         - Direction: Specifies in what direction the shadow is cast from the object. 
           It is an angle between 0 and 360 with 0 starting on the right hand side 
           and moving counter-clockwise around the object. The value of 320 in this 
           example casts the shadow on the lower right hand side of the button. The default
           is 315.
         - BlurRadius: Specifies how blurry the shadow is. The range is between 0 and 1 with 1
           being the softest. Default is 5. 
         - Opacity: Specifies how transparent the shadow is. The range is between 0 
           and 1 with 1 being fully opaque and 0 fully transparent (not visible). The
           default is 1. -->
            <DropShadowEffect Color="Black" Direction="320" ShadowDepth="25" 
             BlurRadius="5" Opacity="0.5" />
        </Button.Effect>
    </Button>
</StackPanel>

The following example shows how to use a Style to apply a DropShadowEffect to a Button.

Run this sample

<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Style x:Name="buttonStyle" TargetType="Button" >
            <Style.Setters>
                <Setter Property = "Effect" >
                    <Setter.Value>
                        <DropShadowEffect Color="Black" Direction="320"  
                         ShadowDepth="25" BlurRadius="5" Opacity="0.5" />

                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    </StackPanel.Resources>
    <Button Width="200" Height="30" Style="{StaticResource buttonStyle}" 
            Margin="20" Content="Drop Shadow Under Me" />
</StackPanel>

The following example shows how to use code to apply a DropShadowEffect to a Button when it is clicked.

Run this sample

<StackPanel>
    <Button Click="ApplyDropShadow" Width="200" Margin="20" 
            Content="Click!" />
</StackPanel>

Private Sub ApplyDropShadow(ByVal sender As Object, ByVal e As RoutedEventArgs)

    Dim myButton As Button = CType(sender, Button)

    ' Initialize a new DropShadowEffect that will be applied
    ' to the Button.
    Dim myDropShadowEffect As DropShadowEffect = New DropShadowEffect

    ' Set the color of the shadow to Black.
    Dim myShadowColor As Color = New Color
    myShadowColor.A = 255

    ' Note that the alpha value is ignored by Color property. 
    ' The Opacity property is used to control the alpha.
    myShadowColor.B = 50
    myShadowColor.G = 50
    myShadowColor.R = 50
    myDropShadowEffect.Color = myShadowColor

    ' Set the direction of where the shadow is cast to 320 degrees.
    myDropShadowEffect.Direction = 320

    ' Set the depth of the shadow being cast.
    myDropShadowEffect.ShadowDepth = 25

    ' Set the shadow softness to the maximum (range of 0-1).
    myDropShadowEffect.BlurRadius = 6

    ' Set the shadow opacity to half opaque or in other words - half transparent.
    ' The range is 0-1.
    myDropShadowEffect.Opacity = 0.5

    ' Apply the effect to the Button.
    myButton.Effect = myDropShadowEffect
End Sub

private void ApplyDropShadow(object sender, RoutedEventArgs e)
{
    Button myButton = (Button)sender;


    // Initialize a new DropShadowEffect that will be applied
    // to the Button.
    DropShadowEffect myDropShadowEffect = new DropShadowEffect();

    // Set the color of the shadow to Black.
    Color myShadowColor = new Color();
    myShadowColor.A = 255; // Note that the alpha value is ignored by Color property. 
    // The Opacity property is used to control the alpha.
    myShadowColor.B = 50;
    myShadowColor.G = 50;
    myShadowColor.R = 50;

    myDropShadowEffect.Color = myShadowColor;

    // Set the direction of where the shadow is cast to 320 degrees.
    myDropShadowEffect.Direction = 320;

    // Set the depth of the shadow being cast.
    myDropShadowEffect.ShadowDepth = 25;

    // Set the shadow softness to the maximum (range of 0-1).
    myDropShadowEffect.BlurRadius = 6;

    // Set the shadow opacity to half opaque or in other words - half transparent.
    // The range is 0-1.
    myDropShadowEffect.Opacity = 0.5;

    // Apply the effect to the Button.
    myButton.Effect = myDropShadowEffect;
}

The following example shows how to animate the ShadowDepth and BlurRadius of the DropShadowEffect to make it appear like the Button is lifting off of the surface of the screen after it is clicked.

Run this sample

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">

            <!-- Animate shadow depth of the effect. -->
            <DoubleAnimation
           Storyboard.TargetName="myDropShadowEffect"
           Storyboard.TargetProperty="ShadowDepth"
           To="30" Duration="0:0:0.5"
           AutoReverse="True" />

            <!-- Animate shadow BlurRadius of the effect. As 
               the Button appears to get farther from the shadow,  
               the shadow blurs. -->
            <DoubleAnimation
           Storyboard.TargetName="myDropShadowEffect"
           Storyboard.TargetProperty="BlurRadius"
           To="10" Duration="0:0:0.5"
           AutoReverse="True" />

            <!-- Animate ScaleX of button. -->
            <DoubleAnimation
           Storyboard.TargetName="myScaleTransform"
           Storyboard.TargetProperty="ScaleX"
           To="1.5" Duration="0:0:0.5"
           AutoReverse="True" />

            <!-- Animate ScaleY of button. -->
            <DoubleAnimation
           Storyboard.TargetName="myScaleTransform"
           Storyboard.TargetProperty="ScaleY"
           To="1.5" Duration="0:0:0.5"
           AutoReverse="True" />

            <!-- Move button in the X direction. -->
            <DoubleAnimation
           Storyboard.TargetName="myTranslateTransform"
           Storyboard.TargetProperty="X"
           To="-30" Duration="0:0:0.5"
           AutoReverse="True" />

            <!-- Move button in the Y direction. -->
            <DoubleAnimation
           Storyboard.TargetName="myTranslateTransform"
           Storyboard.TargetProperty="Y"
           To="-30" Duration="0:0:0.5"
           AutoReverse="True" />

        </Storyboard>

    </StackPanel.Resources>
    <Button Content="Click!" Click="StartAnimation" Width="200"
            Margin="60">
        <Button.Effect>
            <DropShadowEffect x:Name="myDropShadowEffect" />
        </Button.Effect>
        <Button.RenderTransform>
            <TransformGroup>
              <TranslateTransform x:Name="myTranslateTransform" />
              <ScaleTransform x:Name="myScaleTransform" />
            </TransformGroup>
        </Button.RenderTransform>
    </Button>
</StackPanel>

Private Sub StartAnimation(ByVal sender As Object, ByVal args As RoutedEventArgs)
    myStoryboard.Begin()
End Sub

private void StartAnimation(object sender, RoutedEventArgs args)
{
    myStoryboard.Begin();
}

Version Information

Silverlight

Supported in: 5, 4, 3

Platforms

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.

Thread Safety

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.