WPF- Compile error on referencing a Resource Dictionary file - wpf

Question

Question: When I reference the following Resource Dictionary file in MainWindow.xaml file (shown below), why do I get the following compile error?
CustomWindowStyle resource not found
Remark:
I'm following this article where the Creating A Resource Dictionary File section is also showing the exact procedure that I am using on how to reference Resource Dictionary in MainWindow.xaml
As shown in the image below, VS2019 does CORRECCTLY recognize CustomWindowStyle when I type Style="{StaticResource ....} line in MainWindow.xaml. But at the compile time (as shown in image 2 below), it throws the above error.
I am using .NET Core 3.1. I'm not sure if the issue is related to .NET Core
When typing the line Style="{StaticResource ....} the intellisense correctly shows the option of selecting CustomWindowStyle:
At the compile time, the error shows up:
.
WindowStyle.xaml:
<ResourceDictionary x:Class="WPF_OctDelete.WindowStyle"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPF_OctDelete">
<Style x:Key="CustomWindowStyle" TargetType="{x:Type Window}">
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CaptionHeight="30"
CornerRadius="4"
GlassFrameThickness="0"
NonClientFrameEdges="None"
ResizeBorderThickness="5"
UseAeroCaptionButtons="False" />
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="Gray" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="5,30,5,5">
<AdornerDecorator>
<ContentPresenter />
</AdornerDecorator>
</Border>
<DockPanel Height="30"
VerticalAlignment="Top"
LastChildFill="False">
<TextBlock Margin="5,0,0,0"
VerticalAlignment="Center"
DockPanel.Dock="Left"
FontSize="16"
Foreground="White"
Text="{TemplateBinding Title}" />
<Button x:Name="btnClose"
Width="15"
Margin="5"
Click="CloseClick"
Content="X"
DockPanel.Dock="Right"
WindowChrome.IsHitTestVisibleInChrome="True" />
<Button x:Name="btnRestore"
Width="15"
Margin="5"
Click="MaximizeRestoreClick"
Content="#"
DockPanel.Dock="Right"
WindowChrome.IsHitTestVisibleInChrome="True" />
<Button x:Name="btnMinimize"
Width="15"
Margin="5"
VerticalContentAlignment="Bottom"
Click="MinimizeClick"
Content="_"
DockPanel.Dock="Right"
WindowChrome.IsHitTestVisibleInChrome="True" />
</DockPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
MainWindow.xaml:
<Window x:Class="WPF_OctDelete.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:WPF_OctDelete"
mc:Ignorable="d"
Style="{StaticResource CustomWindowStyle}"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="WindowStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Button x:Name="btnTest" Content="Test"/>
</Grid>
</Window>

Answer 1

Your resource is being loaded after the window is loaded and so it cannot find the resource during the window loading event. So your method isn't going to work that way.
You need to put that resource in your App.xaml file, see - How to Set the Source of an Image in XAML and in Code Behind to an image in another project in WPF
In your case (in App.xaml) - '
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="WindowStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
And then you can use your key in the Window -
<Window x:Class="WPF_OctDelete.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:WPF_OctDelete"
mc:Ignorable="d"
Style="{StaticResource CustomWindowStyle}"
Title="MainWindow" Height="450" Width="800">
<!--Rest of your UI Elements-->
</Window>
No need to add resources to your window, since its added to the main app file. That resource will be available across your entire project (available for other windows/controls)
(Edit: further clarification - When you add something as a "StaticResource" to your window style, but load the actual resource later, the window "loaded" event is not going to pick it up. Another solution is to refer your style as "DynamicResource", so the style during the "loaded" event is not static and will be updated when it captures the new resource.)

Answer 2

The XAML processor reads the XAML file from top to bottom so by the time it tries to resolve the CustomWindowStyle resource, it hasn't yet loaded the ResourceDictionary.
You could easily fix this by setting the Resources property before you set the Style property:
<Window x:Class="WPF_OctDelete.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:WPF_OctDelete"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="WindowStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Window.Style>
<StaticResource ResourceKey="CustomWindowStyle"/>
</Window.Style>
<Grid>
<Button x:Name="btnTest" Content="Test"/>
</Grid>
</Window>
The order matters.