6

I'm working on a c# wpf app with a custom window (allowtransparency = true, resize = none, window style = none).

Now I would like to add drop shadow similar to the zune pc software. I read up on this and the included dropshadoweffect is not covering all angles of my window and it is said to kill performance.

I want to implement it like this: I add a margin to my layout grid which I programmatically remove when maximizing the app.

What is the best way to add a drop shadow which can be applied to a grid, which doesn't kill performance and drops shadow in all directions?

4 Answers 4

12

I've tried the solutions posted here but none of them were getting me close to the end result which I wanted (See screenshot below). So I tried out a couple of different things and I am posting my solution here, just in case someone would be interested in achieving something similar. BTW: if you could improve my solution, please do let me know because I find it a bit redundant at the moment.

Window with blue drop shadow effect

Ok now for the code that drives this effect:

<Window ... WindowStyle="None" AllowsTransparency="True" Background="Transparent" ...> <Border> <Border.Effect> // opacity does not need to be specified but it looks cooler when you do <DropShadowEffect BlurRadius="20" ShadowDepth="0" Opacity="0.8" Color="Blue" /> </Border.Effect> // make sure the value for Grid Margin is the same as DropShadowEffect // BlurRadius <Grid Background="White" Margin="20"> // I tried setting borderthickness and borderbrush to the previous // <Border> element but instead of the border being shown right after // the grid and before the drop shadow, it would show after the drop // shadow making the overall effect very ugly <Border BorderThickness="1" BorderBrush="Black"> // now you can specify whatever you want to display in the window <Grid> .... </Grid> </Border> </Grid> </Border> </Window> 
Sign up to request clarification or add additional context in comments.

Comments

6

DropShadowEffect doesn't "kill performance"... it is rendered using hardware acceleration, and rendering a drop shadow on a window is not a big deal for current GPUs. You're probably confusing with DropShadowBitmapEffect, which is software rendered. Anyway all BitmapEffects were made obsolete in 3.5 SP1 and don't work at all in 4.0, only Effects can be used now

1 Comment

So I use the dropshadoweffect on my grid then? How can I get it to drop shadow in all directions or do I have to apply multiple effects..?
4

Direction of -75, ShadowDepth of 2 and BlurRadius of 27 helped for me.

Best way is to use blend for doing these.

HTH

1 Comment

Just wanted to point out - the ShadowDepth of 2 makes a surprisingly large difference here, even with such a large blur. You can get a totally centred 'shadow' (more of an outerglow really) by setting ShadowDepth to 0, but there's absolutely no pop to it, wheras even on a large object the ShadowDepth of 2 establishes it firmly as a shadow rather than an outline.
2

Building off of Princes's code, I wanted to paste a final product.

<Window x:Class="RDNScoreboard.Views.InitialWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="InitialWindow" Height="300" Width="300" WindowStyle="None" AllowsTransparency="True" Background="Transparent" BorderThickness="3" > <Border> <Border.Effect> <DropShadowEffect BlurRadius="27" Color="Black" Opacity="0.8" ShadowDepth="2" Direction="-75" /> </Border.Effect> <Grid Background="White" > </Grid> </Border> 

1 Comment

This does not take window chrome into account, which is terrible in practice.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.