WPF XAML: Custom Window Style not working

Question

I am attempting to customize the window style in a WPF .NET Core 3.1 application in VS2019 v16.10.1 and previous. I'm following along with a video, currently adding the style directly in the MainWindow.xaml. None of my style shows up in the XAML design view (in the video it does). When I run the application in the debugger, the style will show up correctly. However, if I try to remove the border color (trying to make a drop shadow for the window) with either '{x:Null}' or 'Background=Transparent' (or not setting it), the debugger shows a black border.

I have created a new test application and copied only the MainWindow.xaml code in and the problem persists. Any clue what is going on or how I can solve this?

To replicate, create a new WPF C# application using .NET Core 3.1 in VS2019 v16.10.1 and copy the following code into MainWindow.xaml:

<Window x:Class="CustomWindowStyle.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:CustomWindowStyle"
        mc:Ignorable="d"
        WindowStyle="None"
        Title="MainWindow" Height="600" Width="800" Background="{x:Null}" Foreground="{x:Null}">

    <WindowChrome.WindowChrome>
        <WindowChrome 
            CaptionHeight="36"
            ResizeBorderThickness="0"
            GlassFrameThickness="0"
            CornerRadius="0"/>
        </WindowChrome.WindowChrome>

    <Window.Resources>
        <Style TargetType="{x:Type local:MainWindow}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Window}">
                        <Border Background="{x:Null}" Padding="10">

                            <!-- Main window outline -->
                            <Grid>

                                <!-- Main window-->
                                <Border CornerRadius="0"
                                    Background="Wheat">
                                    <Border.Effect>
                                        <DropShadowEffect ShadowDepth="0" Opacity=".3"/>
                                    </Border.Effect>
                                </Border>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>


    <Grid>
    </Grid>
</Window>

Answer 1

The Window Background default value is White, using Null or Transparent will make your window look black. I make some updates for your ControlTemplate as:

<ControlTemplate TargetType="{x:Type Window}">  
                        <Border Margin="10" BorderThickness="5" BorderBrush="Gray">  
                            <Border.Effect>  
                                <DropShadowEffect Color="Black" Opacity="0.3" Direction="270"  BlurRadius="10" ShadowDepth="3" />  
                            </Border.Effect>  
                            <Grid Background="White">  
  
                            </Grid>  
                        </Border>  
                    </ControlTemplate>  

I perfer below method to make a drop shadow for the window：

 xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework"  
  
    <Window.Style>  
        <Style TargetType="Window">  
            <Setter Property="UseLayoutRounding" Value="True"/>  
            <Setter Property="ResizeMode" Value="NoResize"/>  
            <Setter Property="shell:WindowChrome.WindowChrome">  
                <Setter.Value>  
                    <shell:WindowChrome CaptionHeight="80"  
                            GlassFrameThickness="0,0,0,1"   
                            ResizeBorderThickness="10" />  
                </Setter.Value>  
            </Setter>  
            <Style.Triggers>  
                <DataTrigger Binding="{Binding DataContext.IsHomePage, RelativeSource={RelativeSource Self}}"   
                                 Value="false">  
                    <Setter Property="ResizeMode" Value="CanResize"/>  
                </DataTrigger>  
            </Style.Triggers>  
        </Style>  
    </Window.Style>  
</Window>  

The result picture is:

By the way, there is an answer which uses API to implement.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.