Windows Template Studio WPF UserControl not showing MetroWindow theme when changing TitleTemplate

Question

(UPDATE: even without DEVEXPRESS controls, the same behavior is observed. So, I tested it with a couple textBlocks inside of a Grid...)

I am new to WPF development and I am using Windows Template Studio on VS 2019 (net core 3.1). I am also using DEVEXPRESS.

I am wondering why I am losing the default MetroWindow theme in a user control when I add a custom TitleTemplate to the ShellWindow.xaml.

This is likely something very simple that I am not doing properly...

Repro steps:

1 - Create a default WPF Windows Template Studio Project. Select Navigation Pane as the Project type.

2 - Add a second blank page.

3 - Add DevExpress.WPF to the project (Not needed to duplicate).

4 - Create a simple user control

<UserControl x:Class="NoDevExpresssTitleTemplate.Views.TestUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:NoDevExpresssTitleTemplate.Views"
         xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
         xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
<Grid>
    <dxlc:LayoutControl >
        <dxlc:LayoutGroup>
            <dxlc:LayoutItem Label="test1:" Width="150" VerticalAlignment="Center" Margin="20,0,0,0">
                <dxe:TextEdit EditValue="Test1"/>
            </dxlc:LayoutItem>
            <dxlc:LayoutItem Label="test2:" Width="150" VerticalAlignment="Center" Margin="20,0,0,0">
                <d:TextBox Text="test2"/>
            </dxlc:LayoutItem>
            
        </dxlc:LayoutGroup>
    </dxlc:LayoutControl>
        
</Grid>

5 - Use the user control on the second blank page created,

<Page
x:Class="NoDevExpresssTitleTemplate.Views.SearchPage"
Style="{DynamicResource MahApps.Styles.Page}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:properties="clr-namespace:NoDevExpresssTitleTemplate.Properties"
xmlns:views="clr-namespace:NoDevExpresssTitleTemplate.Views"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="48" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock
        Style="{StaticResource PageTitleStyle}"
        Margin="{StaticResource MediumLeftMargin}"
        Text="{x:Static properties:Resources.SearchPageTitle}" />
    <Grid
        Grid.Row="1"
        Margin="{StaticResource MediumLeftRightMargin}"
        Background="{DynamicResource MahApps.Brushes.Gray10}">
        <!--
        The Mahapps Gray10 color represents where you should place your content.
        Place your content here.
        -->
        <views:TestUserControl></views:TestUserControl>
    </Grid>
</Grid>

6 - Update the ShellWindow.xaml, including the TitleTemplate,

<controls:MetroWindow
x:Class="NoDevExpresssTitleTemplate.Views.ShellWindow"
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:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:properties="clr-namespace:NoDevExpresssTitleTemplate.Properties"
xmlns:templateSelectors="clr-namespace:NoDevExpresssTitleTemplate.TemplateSelectors"

Style="{StaticResource CustomMetroWindow}"
mc:Ignorable="d"
MinWidth="500"
MinHeight="350"
Title="{x:Static properties:Resources.AppDisplayName}">

<controls:MetroWindow.TitleTemplate>
    <DataTemplate>
        <dxlc:LayoutControl>
            <dxlc:LayoutGroup Orientation="Vertical" Height="50" >
                <TextBlock Text="{TemplateBinding Content}"
                           TextTrimming="CharacterEllipsis"
                           VerticalAlignment="Center"
                           Margin="8 -1 8 0"
                           FontWeight="Light"
                           FontSize="{DynamicResource WindowTitleFontSize}"
                           FontFamily="{DynamicResource HeaderFontFamily}" />
                <TextBlock Text="{TemplateBinding Content}"
                           TextTrimming="CharacterEllipsis"
                           VerticalAlignment="Center"
                           Margin="8 -1 8 0"
                           FontWeight="Light"
                           FontSize="{DynamicResource WindowTitleFontSize}"
                           FontFamily="{DynamicResource HeaderFontFamily}" />
            </dxlc:LayoutGroup>
        </dxlc:LayoutControl>

    </DataTemplate>
</controls:MetroWindow.TitleTemplate>

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Loaded">
        <i:InvokeCommandAction Command="{Binding LoadedCommand}" />
    </i:EventTrigger>
    <i:EventTrigger EventName="Unloaded">
        <i:InvokeCommandAction Command="{Binding UnloadedCommand}" />
    </i:EventTrigger>
</i:Interaction.Triggers>
<controls:MetroWindow.LeftWindowCommands>
    <controls:WindowCommands>
        <Button
            Width="{Binding ElementName=hamburgerMenu, Path=CompactPaneLength}"
            AutomationProperties.Name="{x:Static properties:Resources.ShellGoBackButton}"
            ToolTip="{x:Static properties:Resources.ShellGoBackButton}"
            Command="{Binding GoBackCommand}">
            <TextBlock
                Text="&#xE72B;"
                FontSize="14"
                FontFamily="Segoe MDL2 Assets"
                AutomationProperties.Name="{x:Static properties:Resources.ShellGoBackButton}" />
        </Button>
    </controls:WindowCommands>
</controls:MetroWindow.LeftWindowCommands>
<controls:MetroWindow.Resources>
    <templateSelectors:MenuItemTemplateSelector
        x:Key="MenuItemTemplateSelector">
        <templateSelectors:MenuItemTemplateSelector.GlyphDataTemplate>
            <DataTemplate DataType="{x:Type controls:HamburgerMenuGlyphItem}">
                <Grid Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock
                        Grid.Column="0"
                        FontSize="16"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        FontFamily="Segoe MDL2 Assets"
                        Text="{Binding Glyph}"
                        ToolTip="{Binding Label}" />
                    <TextBlock
                        Grid.Column="1"
                        VerticalAlignment="Center"
                        FontSize="16"
                        Text="{Binding Label}" />
                </Grid>
            </DataTemplate>
        </templateSelectors:MenuItemTemplateSelector.GlyphDataTemplate>
        <templateSelectors:MenuItemTemplateSelector.ImageDataTemplate>
            <DataTemplate DataType="{x:Type controls:HamburgerMenuImageItem}">
                <Grid Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Ellipse
                        Grid.Column="0"
                        Width="24"
                        Height="24"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        ToolTip="{Binding Label}">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="{Binding Thumbnail}" />
                        </Ellipse.Fill>
                    </Ellipse>
                    <TextBlock
                        Grid.Column="1"
                        VerticalAlignment="Center"
                        FontSize="16"
                        Text="{Binding Label}" />
                </Grid>
            </DataTemplate>
        </templateSelectors:MenuItemTemplateSelector.ImageDataTemplate>
    </templateSelectors:MenuItemTemplateSelector>
</controls:MetroWindow.Resources>
<controls:MetroWindow.Content>
    <controls:HamburgerMenu
        x:Name="hamburgerMenu"
        HamburgerButtonName="{x:Static properties:Resources.ShellHamburgerButtonName}"
        IsPaneOpen="False"
        DisplayMode="CompactInline"
        ItemsSource="{Binding MenuItems}"
        SelectedItem="{Binding SelectedMenuItem}"
        ItemCommand="{Binding MenuItemInvokedCommand}"
        ItemTemplateSelector="{StaticResource MenuItemTemplateSelector}">
        <controls:HamburgerMenu.Content>
            <Frame
                x:Name="shellFrame"
                Grid.Row="1"
                NavigationUIVisibility="Hidden"
                Focusable="False" />
        </controls:HamburgerMenu.Content>
    </controls:HamburgerMenu>
</controls:MetroWindow.Content></controls:MetroWindow>

The default Light.Blue theme/style is lost,