UWP: Create shadow in XAML

Question

I am currently trying to create a circular button with two ellipse-elements in UWP and want one of them to throw a shadow at a certain angle. I found a way to do so in WPF which looks like this:

WPF XAML:

<Ellipse>
  <Ellipse.BitmapEffect>
    <DropShadowBitmapEffect Color="Black" Direction="-50" ShadowDepth="50" Softness=".7"/>
  </Ellipse.BitmapEffect>
</Ellipse>

What's the equivalent in UWP?

score 11 · Accepted Answer · answered Sep 05 '17 at 10:52

11

The easiest way is to use the DropShadowPanel from UWP Community Toolkit.

So first just install

Install-Package Microsoft.Toolkit.Uwp.UI.Controls -Version 2.0.0

Then use the following code in your XAML

<controls:DropShadowPanel Color="Black"
                          OffsetX="-50"
                          OffsetY="-50"
                          BlurRadius="50"
                          ShadowOpacity=".7"
                          Width="120"
                          Height="120"
                          HorizontalContentAlignment="Stretch"
                          VerticalContentAlignment="Stretch">
    <Ellipse />
</controls:DropShadowPanel>

answered Sep 05 '17 at 10:52

Justin XL

38,763
7
88
133

1

Quick and proper answer, thanks alot! – Nigel-Lee Sep 05 '17 at 11:49
What am I doing wrong here? I thought I did everything you said... :-/ https://i.imgur.com/gGZRoGe.png – kayleeFrye_onDeck May 13 '19 at 23:23
@kayleeFrye_onDeck you need to install the toolkit package from nuget. – Justin XL May 14 '19 at 00:45
@JustinXL I did... I did literally everything you said in your answer, which is why I'm asking what I'm doing wrong. I used the package management console in VS, and then you can see what I did in the screenshot. – kayleeFrye_onDeck May 14 '19 at 01:10
Try to update the nuget package also. It’s now 5.0 at least. – Justin XL May 14 '19 at 01:11

score 1 · Answer 2 · answered Sep 05 '17 at 11:02

In UWP there is a different component to do this job. It's called the Composition API and is available in the NuGet Package "Win2D.uwp".

Basically you'll need to get the compositor for your visual object with

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

and create a drop shadow using the compositor.

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

// create a red sprite visual
var myVisual = _compositor.CreateSpriteVisual();
myVisual.Brush = _compositor.CreateColorBrush(Colors.Red);
myVisual.Size = new System.Numerics.Vector2(100, 100);

// create a blue drop shadow
var shadow = _compositor.CreateDropShadow();
shadow.Offset = new System.Numerics.Vector3(30, 30, 0);
shadow.Color = Colors.Blue;
myVisual.Shadow = shadow;

// render on page
ElementCompositionPreview.SetElementChildVisual(this, myVisual);

The downside beeing, that this is not quite straight forward. You can use different brushes to display images, solid colors or other stuff, it won't apply to existing visuals on screen (as far as I understand it). You can read more about the basics here. Probalby you'll need to use a surface brush, which can hold a wide variety of different visual types, like images. Currently it does not look like there is a ready made component for ellipses though.

Alternatively there exists a xaml extension which will do all that stuff for you using pure xaml, might be worth a shot and maybe also support ellipses.

As an ending note, all of this is currently a work in progress on microsofts part and should become a native part of the UWP API in the future.

UWP: Create shadow in XAML

2 Answers2