WPF XAML: Custom Window Style not working

B R 21 Reputation points
2021-06-14T15:39:13.33+00:00

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>
Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,771 questions
Visual Studio
Visual Studio
A family of Microsoft suites of integrated development tools for building applications for Windows, the web and mobile devices.
5,110 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
809 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. DaisyTian-1203 11,621 Reputation points
    2021-06-15T04:19:10.467+00:00

    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:
    105626-capture.png

    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.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.