Drop Shadow on a Chromeless WPF Window
In a WPF app, you would probably want some of your pop-up windows without a title bar and be un-resizable. To remove the title bar and make the window un-resizable, you have to set properties WindowStyle=”None” and ResizeMode=”NoResize”.
<Window ...
WindowStyle="None"
ResizeMode="NoResize">
</Window>
However, by setting these two properties, you are actually making the window Chromeless. By chromeless, I mean the window has no border style and no drop shadow effect. The window looks really weird, isn’t it? It’s totally blended with the background. Oh, no… I would like to keep the drop shadow effect. Fine, I’m going to add a customized drop effect to the window.
<Window.Effect>
<DropShadowEffect Color="Gray" BlurRadius="20" Direction="-90" RenderingBias="Quality" ShadowDepth="4"/>
</Window.Effect>
Perfect! I have achieved my goal. Now, the popup window has no title bar, is not resizable and has a beautiful drop shadow effect. BTW, the content inside the popup window is a DataGrid with a long list.
The WPF app works beautifully locally. However, if you run it on a remote desktop or on a virtual machine, you will notice that the vertical scrollbar of the DataGrid on the popup window is not responding. Why is it so slow?
If you dig into the problem, you will find WPF app has some rendering performance issues running on a remote desktop.
Gosh, the DropShadowEffect makes the window running on a remote desktop not scrollable. Hence, it’s best not to add a DropShadowEffect. But I really want the popup window to be titlebar-less and un-resizable. What should I do? Haha, The following codes will solve the problem.
<Window ...
WindowStyle="None"
ResizeMode="CanResize">
<WindowChrome.WindowChrome>
<WindowChrome ResizeBorderThickness="0" CaptionHeight="0"/>
</WindowChrome.WindowChrome>
</Window
Even though the ResizeMode is set to ‘CanResize’, however, because we have set the ResizeBorderThickness to 0, thus, the window is not resizable at all. And by setting the CaptionHeight to 0, you disallow the user to maximize the window by clicking on the header area.
Cheers!