Extending to titlebar is not working as expected (WinAppSDK 1.0.1)

Describe the bug

After following the titlebar customisation for a WinUI 3, WinAppSDK 1.0.1 app, following observations are made

[1] Setting the title bar with a Margin=0,0,120,0

• A gray overlay is displayed over the titlebar, except at the either end of the titlebar, both left and right. On Right it is expected as margin of 120 is given but why left.

• System control buttons (min, max, close) don’t function either

• Changing the Margin=0,0,12,0 also changes the margin on both ends, not just right.

[2] Setting the title bar with a Margin=0,0,0,0

• A gray overlay is now displayed over whole of titlebar.
• However, system controls (min, max, close) now work

Steps to reproduce the bug

<Window
    x:Class="Raya.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Raya"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Grid.RowDefinitions="48,*" >

        <Grid x:Name="AppTitleBar" Margin="0,0,120,0" Background="Pink">
            <Image Source="Assets/StoreLogo.png"
                   HorizontalAlignment="Left" 
                   Width="16" Height="16" 
                   Margin="8,0"/>
            <TextBlock x:Name="AppTitleTextBlock" Text="App title ewr iueyr iuwe riu qwiuy qiwueyr iquwy iuwqy iureyqwiu"
                       TextWrapping="NoWrap"
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       VerticalAlignment="Center"
                       Margin="28,0,0,0"/>
        </Grid>
        <ContentControl Grid.Row="1"   x:Name="MainContent" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
    </Grid>
</Window>

    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            ExtendsContentIntoTitleBar = true;
            SetTitleBar(AppTitleBar);
        }

        public object BodyContent
        {
            get => MainContent.Content;
            set => MainContent.Content = value;
        }
    }

Expected behavior

1. Gray overlay should not be displayed
2. System controls should work as per the documentaion

Screenshots

No response

NuGet package version

WinUI 3 - Windows App SDK 1.0

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

Windows 10 (20H2): Build 19042

Additional context

I am not using the single project packaged solution, but updated my earlier project with two csproj to 1.0.1 SDK.

[lakienvinh]

In the App.xaml file you can set the “smoke layer” to transparent:

<SolidColorBrush x:Key="WindowCaptionBackground" Color="Transparent"/> <SolidColorBrush x:Key="WindowCaptionBackgroundDisabled" Color="Transparent"/>

More codes:

<SolidColorBrush x:Key="WindowCaptionBackground" Color="Transparent"/> <SolidColorBrush x:Key="WindowCaptionBackgroundDisabled" Color="Transparent"/> </ResourceDictionary> </Application.Resources>

[harvinders]

@pratikone What about the smoke layer? Can’t we get rid of that? The whole idea of extending the content to the titlebar is to blend the titlebar and the content and have the same background/material