Maximum custom window loses drop shadow effect

Question

I have a custom WPF window defined as:

Answer 1

To create a drop shadow effect whilst having the ability to re-size the form try the following:

1. Set the following properties on the window:

   • ResizeMode="CanResizeWithGrip"
   • AllowsTransparency="True"
   • WindowStyle="None"
   • Background="Transparent"
   • BorderThickness="3"

2. After the window declaration, add a Border element

3. Create a Border.Effect element inside of the border

4. For the border effect add the following:

   <DropShadowEffect BlurRadius="5" Color="Black" Opacity="0.8" ShadowDepth="0.5" />
   

This will create the following (without the control box in the top right):

Full XAML:

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" MinHeight="500" Height="350" MinWidth="300" Width="700" ResizeMode="CanResizeWithGrip" AllowsTransparency="True" WindowStyle="None" Background="White" BorderThickness="3">
<Border>
    <Border.Effect>
        <DropShadowEffect BlurRadius="5" Color="Black" Opacity="0.8" ShadowDepth="0.5" />
    </Border.Effect>
                      <!-- Put your content in here -->
</Border>
</Window>

Answer 2

So I found out a way to get this to work.

You need to use the WPF Shell Integration Library (here) to do the work for you. As it's been written by MS, they have fixed (it seems) any issues with doing to the P/Invoke code.

So it is easy to get a Window that has no Aero glass, is resizable on the edges, has a caption area that behaves with Aero snap, and has a drop shadow that reappears after min/maxing.

This is the code for my window (note, you need to have referenced Microsoft.Windows.Shell)

<Window x:Class="MyLibrary.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:shell="http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell"
        Title="MainWindow"
        WindowStyle="SingleBorderWindow"
        ResizeMode="CanResizeWithGrip"
        mc:Ignorable="d"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        d:DesignHeight="449"
        d:DesignWidth="677"
        Foreground="White"
        Background="Black">

    <shell:WindowChrome.WindowChrome>
        <shell:WindowChrome CaptionHeight="35"
                            GlassFrameThickness="0,0,0,1"
                            ResizeBorderThickness="5" />
    </shell:WindowChrome.WindowChrome>

    <Grid x:Name="LayoutRoot">

    </gGrid>
</Window>

The <shell:WindowChrome> is where you set all the different variables for the interop.

• CaptionHeight: This is the height of the caption area (headerbar) that allows for the Aero snap, double clicking behaviour as a normal title bar does.
• GlassFrameThickness: Setting this to 0,0,0,1 for some reason removes the chrome (glass), keeps the square border, and adds a drop shadow.
• ResizeBorderThickness: This is thickness at the edge of the window which is where you can resize the window.

Other things to note as that you keep the Window.WindowStyle property equal to SingleBorderWindow and let the Shell Library deal with removing the title, buttons and other chrome.

So I kinda wasted my bounty there, but it looks like a completely viable solution that works a treat!

EDIT:

Here is a picture of the result:

I also put up a sample project on http://code.google.com/p/sample-metro-wpf-application/. It's an MIT license and people can use it however they want.

Answer 3

Here's some minimal code that does what you're after.

<Window x:Class="WindowChromeSpike.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <WindowChrome.WindowChrome>
    <WindowChrome GlassFrameThickness="0,0,0,1" CornerRadius="0" />
  </WindowChrome.WindowChrome>

  <!-- window contents: just a blue rectangle for demo purposes -->
  <Border Background="#0093C0" />

</Window>

This window behaves like a usual window in that it can be:

• resized via its edges
• dragged within the title area
• right-clicked the title area to show the system menu
• maximised/restored by double clicking the title area
• snapped to the sides of your screens by dragging or using hotkeys (Win 10)

It also has a drop shadow.

---

The end result looks like this: