DropShadow DropShadow DropShadow DropShadow Class

Definition

A drop shadow cast by a SpriteVisual or LayerVisual.

public : sealed class DropShadow : CompositionShadow
struct winrt::Windows::UI::Composition::DropShadow : CompositionShadow
public sealed class DropShadow : CompositionShadow
Public NotInheritable Class DropShadow Inherits CompositionShadow
Inheritance
Attributes

Windows 10 requirements

Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

Examples

Simple DropShadow


private async void InitComposition()
{
  _compositor = ElementCompositionPreview.GetElementVisual(MyGrid).Compositor;
  _imageLoader = ImageLoaderFactory.CreateImageLoader(_compositor);

  //Create surface brush and load image
  CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
  surfaceBrush.Surface = await _imageLoader.LoadImageFromUriAsync(new Uri("ms-appx:///Assets/cat.jpg"));

  //Create sprite visual
  SpriteVisual visual = _compositor.CreateSpriteVisual();
  visual.Brush = surfaceBrush;
  visual.Size = new Vector2(270, 200);

  //Create drop shadow
  DropShadow shadow = _compositor.CreateDropShadow();
  shadow.BlurRadius = 5;
  shadow.Offset = new Vector3(15, 15, -10);
  shadow.Color = Colors.DarkGray;

  //Associate shadow with visual
  visual.Shadow = shadow;
}         
         

DropShadow with Animations


private async void InitComposition()
{
  _compositor = ElementCompositionPreview.GetElementVisual(MyGrid).Compositor;
  _imageLoader = ImageLoaderFactory.CreateImageLoader(_compositor);

  //Create surface brush and load image
  CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
  surfaceBrush.Surface = await _imageLoader.LoadImageFromUriAsync(new Uri("ms-appx:///Assets/cat.jpg"));

  //Create sprite visual
  SpriteVisual visual = _compositor.CreateSpriteVisual();
  visual.Brush = surfaceBrush;
  visual.Size = new Vector2(270, 200);

  //Create drop shadow
  DropShadow shadow = _compositor.CreateDropShadow();
  shadow.BlurRadius = 5;
  shadow.Offset = new Vector3(15, 15, -10);
  shadow.Color = Colors.DarkGray;

  //Create animations
  ScalarKeyFrameAnimation blurAnimation = this.CreateBlurAnimation();
  Vector3KeyFrameAnimation offsetAnimation = this.CreateOffsetAnimation();

  //Apply animations
  shadow.StartAnimation("BlurRadius", blurAnimation);
  shadow.StartAnimation("Offset", offsetAnimation);

  //Associate shadow with visual
  visual.Shadow = shadow;
}

private ScalarKeyFrameAnimation CreateBlurAnimation()
{
  ScalarKeyFrameAnimation shadowBlurAnimation = _compositor.CreateScalarKeyFrameAnimation();
  shadowBlurAnimation.InsertKeyFrame(0.0f, 5.0f);
  shadowBlurAnimation.InsertKeyFrame(0.5f, 20.0f);
  shadowBlurAnimation.InsertKeyFrame(1.0f, 5.0f);
  shadowBlurAnimation.Duration = TimeSpan.FromSeconds(2);
  shadowBlurAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

  return shadowBlurAnimation;
}

private Vector3KeyFrameAnimation CreateOffsetAnimation()
{
  Vector3 startOffset = new Vector3(15, 15, -10);
  Vector3 endOffset = new Vector3(30, 30, -20);

  Vector3KeyFrameAnimation offsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
  offsetAnimation.InsertKeyFrame(0.0f, startOffset);
  offsetAnimation.InsertKeyFrame(0.5f, endOffset);
  offsetAnimation.InsertKeyFrame(1.0f, startOffset);
  offsetAnimation.Duration = TimeSpan.FromSeconds(2);
  offsetAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

  return offsetAnimation;
}         
         

DropShadow using CompositionDropShadowSourcePolicy to inherit alpha from the Visual's brush


private async void InitComposition()
{
  _compositor = ElementCompositionPreview.GetElementVisual(MyGrid).Compositor;

  //Create surface brush and load image
  CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
  surfaceBrush.Surface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/circle.png"));

  //Create sprite visual
  SpriteVisual visual = _compositor.CreateSpriteVisual();
  visual.Brush = surfaceBrush;
  visual.Size = new Vector2(270, 200);

  //Create drop shadow
  DropShadow shadow = _compositor.CreateDropShadow();
  shadow.BlurRadius = 5;
  shadow.Offset = new Vector3(15, 15, -10);
  shadow.Color = Colors.DarkGray;

  //Specify mask policy for shadow
  shadow.SourcePolicy = CompositionDropShadowSourcePolicy.InheritFromVisualContent;

  //Associate shadow with visual
  visual.Shadow = shadow;
}         
         

Remarks

DropShadows are a common way to provide an indication of depth in application UI. To add a DropShadow, create an instance of DropShadow and attach it using the .Shadow property on a SpriteVisual or LayerVisual.

Shadows are not clipped by the implicit clip set on the visual (based on size of the visual). However, shadows respect the explicit clip set on the visual using SpriteVisual.Clip Property.

Version history

Windows version SDK version Value added
1709 16299 SourcePolicy

Properties

BlurRadius BlurRadius BlurRadius BlurRadius

The radius of the Gaussian blur used to generate the shadow. Animatable.

Color Color Color Color

The color of the shadow. Animatable.

Comment Comment Comment Comment

A string to associate with the CompositionObject.

(Inherited from CompositionObject)
Compositor Compositor Compositor Compositor

The Compositor used to create this CompositionObject.

(Inherited from CompositionObject)
Dispatcher Dispatcher Dispatcher Dispatcher

The dispatcher for the CompositionObject.

(Inherited from CompositionObject)
DispatcherQueue DispatcherQueue DispatcherQueue DispatcherQueue

Gets the DispatcherQueue for the CompostionObject.

(Inherited from CompositionObject)
ImplicitAnimations ImplicitAnimations ImplicitAnimations ImplicitAnimations

The collection of implicit animations attached to this object.

(Inherited from CompositionObject)
Mask Mask Mask Mask

Brush used to specify an opacity mask for the shadow. Defaults to the SpriteVisual's brush. Animatable.

Offset Offset Offset Offset

Offset of the shadow relative to its SpriteVisual. Animatable.

Opacity Opacity Opacity Opacity

The opacity of the shadow. Animatable.

Properties Properties Properties Properties

The collection of properties associated with the CompositionObject.

(Inherited from CompositionObject)
SourcePolicy SourcePolicy SourcePolicy SourcePolicy

Used to define the shadow masking policy to be used for the shadow.

Methods

Close Close Close Close

Closes the CompositionObject and releases system resources.

(Inherited from CompositionObject)
PopulatePropertyInfo(String,AnimationPropertyInfo) PopulatePropertyInfo(String,AnimationPropertyInfo) PopulatePropertyInfo(String,AnimationPropertyInfo) PopulatePropertyInfo(String,AnimationPropertyInfo)

Defines a property that can be animated.

(Inherited from CompositionObject)
StartAnimation(String,CompositionAnimation) StartAnimation(String,CompositionAnimation) StartAnimation(String,CompositionAnimation) StartAnimation(String,CompositionAnimation)

Connects an animation with the specified property of the object and starts the animation.

(Inherited from CompositionObject)
StartAnimationGroup(ICompositionAnimationBase) StartAnimationGroup(ICompositionAnimationBase) StartAnimationGroup(ICompositionAnimationBase) StartAnimationGroup(ICompositionAnimationBase)

Starts an animation group.

The StartAnimationGroup method on CompositionObject lets you start CompositionAnimationGroup. All the animations in the group will be started at the same time on the object.

(Inherited from CompositionObject)
StartAnimationGroupWithIAnimationObject(IAnimationObject,ICompositionAnimationBase) StartAnimationGroupWithIAnimationObject(IAnimationObject,ICompositionAnimationBase) StartAnimationGroupWithIAnimationObject(IAnimationObject,ICompositionAnimationBase) StartAnimationGroupWithIAnimationObject(IAnimationObject,ICompositionAnimationBase)

Starts an animation group on the specified target.

(Inherited from CompositionObject)
StartAnimationWithIAnimationObject(IAnimationObject,String,CompositionAnimation) StartAnimationWithIAnimationObject(IAnimationObject,String,CompositionAnimation) StartAnimationWithIAnimationObject(IAnimationObject,String,CompositionAnimation) StartAnimationWithIAnimationObject(IAnimationObject,String,CompositionAnimation)

Connects an animation with the specified property of the target object and starts the animation.

(Inherited from CompositionObject)
StopAnimation(String) StopAnimation(String) StopAnimation(String) StopAnimation(String)

Disconnects an animation from the specified property and stops the animation.

(Inherited from CompositionObject)
StopAnimationGroup(ICompositionAnimationBase) StopAnimationGroup(ICompositionAnimationBase) StopAnimationGroup(ICompositionAnimationBase) StopAnimationGroup(ICompositionAnimationBase)

Stops an animation group.

(Inherited from CompositionObject)
TryGetAnimationController(String) TryGetAnimationController(String) TryGetAnimationController(String) TryGetAnimationController(String)

Returns an AnimationController for the animation running on the specified property.

(Inherited from CompositionObject)

See also