question

BR-3386 avatar image
0 Votes"
BR-3386 asked DaisyTian-1203 commented

WPF XAML: Custom Window Style not working

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-wpfvs-generaldotnet-wpf-xaml
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

DaisyTian-1203 avatar image
0 Votes"
DaisyTian-1203 answered DaisyTian-1203 commented

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.


capture.png (12.7 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi DaisyTian-MSFT, thank you for your detailed response. I'm definitely going to play around with the above code. It turned out the black border issue was just because I didn't know about "AllowsTransparency="True"". After that I was good to go at run-time.

The big issue for me is design-time view only shows the default window style so I can't see what I'm actually doing until I run and hope I got it right. For whatever reason, other styles on pages show fine but not the window style. Is there a setting or something?

0 Votes 0 ·

@BR-3386
Visual Studio Design view can only show some simple style, and other advanced styles need to run the project.

0 Votes 0 ·