WPF custom window (WindowStyle=None) on Windows 11 — how do I get native rounded corners and the OS drop shadow (like Teams)?

[btb4198]

I’m building a custom-chrome WPF app and want it to look like modern Microsoft apps (e.g., Teams): rounded corners plus the native Windows 11 drop shadow drawn by DWM (not an inner DropShadowEffect). I can’t get the OS shadow to appear.

so I want it to look like this:

but I want it to look like this:

<Window x:Class="NG_TAM.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:WindowsResizingLib="clr-namespace:WindowsResizingLib;assembly=WindowsResizingLib"
    xmlns:local="clr-namespace:NG_TAM"
    xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework"
    Title="Demo"
    Height="900" Width="1600"
    MouseLeftButtonDown="Window_MouseLeftButtonDown"
    WindowStartupLocation="CenterScreen"
    ResizeMode="CanResizeWithGrip"
    WindowStyle="None"
    WindowState ="Normal"
    AllowsTransparency="True"
    BorderThickness="3"
    >
<Window.Effect>
    <DropShadowEffect Color="Gray" BlurRadius="20" Direction="-90" RenderingBias="Quality" ShadowDepth="4"/>
</Window.Effect>

<WindowChrome.WindowChrome>
    <WindowChrome GlassFrameThickness="0" CornerRadius="4" CaptionHeight="0" UseAeroCaptionButtons="False" />
</WindowChrome.WindowChrome>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Rectangle x:Name="BackgroundRect"   Grid.ColumnSpan="2"  Grid.RowSpan="5"   Height="auto" Width="auto" Fill="#DCE2E8" RadiusX="4" RadiusY="4">
        <Rectangle.Effect>
            <DropShadowEffect Color="Gray" BlurRadius="12" ShadowDepth="4"  Opacity="0.15"/>
        </Rectangle.Effect>
    </Rectangle>


    <Border x:Name="MenuBar"   Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Height="65" Background="White" CornerRadius="4,4,0,0"  >
        <Border.Effect>
            <DropShadowEffect Opacity="0.20"/>
        </Border.Effect>
    </Border>

    <WindowsResizingLib:WindowsButtons  DataContext="{Binding WindowsButtonsVm}"   ColorOfButtons="Blue"  Height="{Binding  WindowsButtonsVm.WindowStyleButtonsHeight}"  Width="{Binding  WindowsButtonsVm.WindowStyleButtonsWidth}" Grid.Row="0" Grid.Column="4" HorizontalAlignment="Right"   VerticalAlignment="Top"  Margin="0,10,20,0"/>
</Grid>

 

[Skydiver]

I got the rounded corners and drop shadow in the WPF app without having to do anything special. I just created a brand new WPF project (with the .NET 9 as the backing framework).

<Window x:Class="TestWpfChrome.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:TestWpfChrome"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace TestWpfChrome
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

 

[Skydiver]

When I added WindowStyle="None" on line 8, the rounded corners and drop shadow was still present.