How can i remove grey overlay from winui custom titlebar?

Question

I am creating a custom titlebar in a winui app with this code:

  <Border
            x:Name="AppTitleBar"
            Grid.Column="1"
            Background="Transparent"
            Height="{Binding ElementName=NavView, Path=CompactPaneLength}"
            Margin="48,0,0,0"
            VerticalAlignment="Top"
            Canvas.ZIndex="1"
            IsHitTestVisible="True">
            <StackPanel Orientation="Horizontal">
                <!--<Image Width="18" Source="ms-appx:///Assets/Tiles/TitlebarLogo.png" />-->
                <TextBlock
                    x:Name="AppTitle"
                    Margin="16,0,0,0"
                    VerticalAlignment="Center"
                    Style="{StaticResource CaptionTextBlockStyle}"
                    Text="Dynamo Desktop" />
            </StackPanel>
        </Border>

And in c#:

    Window window = App.MainWindow;
            window.ExtendsContentIntoTitleBar = true;  // enable custom titlebar
            window.SetTitleBar(AppTitleBar);

I keep getting a grey overlay like in this image:

How can i correct this?

Answer 1

Try to add these resource to your App.xaml file to override the default WindowCaptionBackground and WindowCaptionBackgroundDisabled resources:

<Application
    x:Class="WinUI3App.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Resources>
        <ResourceDictionary>
            ...
            <SolidColorBrush x:Key="WindowCaptionBackground" Color="Transparent"/>
            <SolidColorBrush x:Key="WindowCaptionBackgroundDisabled" Color="Transparent"/>
        </ResourceDictionary>
    </Application.Resources>
</Application>