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

[harvinders]

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.

[ojhad]

@bpulliam @pratikone please take a look

[pratikone]

refer response in #6895 1084868757. Margin is the issue. It was a workaround earlier for a issue which has now been fixed. working with docs team to get the sample code updated.

[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

[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]

@lakienvinh, this works for me, however, I noticed another issue, if I switch to the dark mode (programatically setting RequestedTheme) even after extending the content into titlebar I still see a light titlebar in light and dark content. @pratikone any idea what is going on there?

[pratikone]

yes. it puzzled me too. TBH, i don't know how that came to be. good news is i made a series of new changes for separate reasons and this issue went away. it will come in a future . feel free to open this issue if it doesn't get fixed in next 1-2 releases.