Home > OS >  How do I get shadow of my Window in WPF without changing the look?
How do I get shadow of my Window in WPF without changing the look?

Time:07-19

I have an existing Window in a WPF application. The application is working fine except for one thing: there is no Shadow behind one Window. I minimized the code to show that. Here is the minimal example:

<Window x:Class="WpfApp4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp4"
        mc:Ignorable="d" Height="182" Width="500" ResizeMode="NoResize" 
        WindowStyle="None" Background="#F5F5F5" WindowStartupLocation="CenterScreen"
        Title="MainWindow">
    <Grid>

    </Grid>
</Window>

By changing/removing the values of ResizeMode and/or WindowStyle, I can get the shadow back. However, this also changes the required look. My window should simply not be resizable and not have a bar on top of it.

So how can I get the shadow back without changing the look? It is needed to be compliant with the UI guidelines of my employer.

CodePudding user response:

Set your main window to have a transparent background and wrap your Grid in a border with padding:

<Window ...etc...

    ResizeMode="NoResize" WindowStyle="None" 
    AllowsTransparency="True" Background="Transparent">

<Border Padding="20">

    <Border.Effect>
        <DropShadowEffect BlurRadius="20" />
    </Border.Effect>

    <Grid Background="White">
    </Grid>

</Border>

If you ever need to maximize the window then use a trigger to remove the padding when it's maximized.

Result:

enter image description here

  •  Tags:  
  • wpf
  • Related