Achieving complete transparency with MAUI & TransparentTintBackdrop

[CodyLyttle]

I'm attempting to set an entirely transparent background using the following code:
new TransparentTintBackdrop(Color.FromArgb(0, 0,0,0));

Unfortunately, this produces a partially transparent gray background as shown:

What I've tried:

• Modifying Background & BackgroundColor properties in AppShell.xaml.
• Modifying Background & BackgroundColor properties in MainPage.xaml.
• Removing all default Styles.

I'm hoping for an obvious solution but willing to get down and dirty with p/invoke.

[dotMorten]

Digging in deep, it looks like Maui has added a slight background color (#80FFFFFF) to their AppShell on this element in the live tree:

Not sure at this point which shell style sets this color.

[CodyLyttle]

Ah, of course. My visual tree was set to "Show just my xaml" so I missed this.
I imagine one way to resolve this would be the use the VisualTreeHelper to navigate to the target element, however I can't figure out how to access the DesktopWindowXamlSource element.

[CodyLyttle]

I've managed to put together a working, although less than elegant solution.

I've extended the TransparentTintBackdrop class to capture the XamlRoot object in an event.

internal class TransparentTintBackdropMaui : TransparentTintBackdrop
{
    // Constructors.

    public event EventHandler<XamlRoot>? Connected;

    protected override void OnTargetConnected(ICompositionSupportsSystemBackdrop connectedTarget, XamlRoot xamlRoot)
    {
        base.OnTargetConnected(connectedTarget, xamlRoot);
        Connected?.Invoke(this, xamlRoot);
    }
}

We then subscribe to that event while setting up the newly created window.

TransparentTintBackdropMaui backdrop = new(Color.FromArgb(0, 0, 0, 0));
backdrop.Connected += OnTintedWindowConnected;

Finally, we use the VisualTreeHelper to step through our elements until we arrive at the ContentGrid containing the troublesome background brush. This may take several attempts as we wait for the window to finish the initialization process.

private static async void OnTintedWindowConnected(object? sender, XamlRoot xamlRoot)
{
    if (VisualTreeHelper.GetChild(xamlRoot.Content, 0) is not WindowRootView windowRoot)
        throw new ArgumentOutOfRangeException(nameof(xamlRoot), "Unexpected xaml layout.");

    (string ElementName, Type ElementType)[] pathToTargetElement = {
        ("RootPage", typeof(Page)),
        ("RootGrid", typeof(Grid)),
        (string.Empty, typeof(ContentPresenter)),
        (string.Empty, typeof(ShellView)),
        ("RootGrid", typeof(Grid)),
        (string.Empty, typeof(Grid)),
        ("RootSplitView", typeof(SplitView)),
        (string.Empty, typeof(Grid)),
        ("ContentRoot", typeof(Grid)),
        (string.Empty, typeof(Border)),
        ("ContentGrid", typeof(Grid))
    };

    FrameworkElement currentElement = windowRoot;
    var attempts = 0;

    while (attempts++ < 10)
    {
        var success = false;

        MainThread.BeginInvokeOnMainThread(() =>
        {
            foreach ((string name, Type type) in pathToTargetElement)
            {
                FrameworkElement? matchingChild = FindChild(currentElement, name, type);
                if (matchingChild is null)
                    return;

                currentElement = matchingChild;
            }

            if (currentElement.GetValue(Panel.BackgroundProperty) is not Brush brush)
                return;

            brush.Opacity = 0;
            success = true;
        });

        if (success)
            break;

        await Task.Delay(100);
    }
}

private static FrameworkElement? FindChild(FrameworkElement parent, string name, Type type)
{
    for (var i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        if (VisualTreeHelper.GetChild(parent, i) is not FrameworkElement child)
            continue;

        var childName = (string)child.GetValue(FrameworkElement.NameProperty);
        Type childType = child.GetType();

        if (childName == name && childType == type)
        {
            return child;
        }
    }

    return null;
}

While this does the job, I'm concerned that the element path may change as I make changes to my own xaml, in which case it might be a good idea to find the target element using depth-first search.

[dotMorten]

Nice! Although that's some scary code.
Looking at the WinUI template, that Grid is just the "Content" of the SplitView control. From what I can tell, the content grid is assigned by MAUI:
https://github.com/dotnet/maui/blob/6ef3167156d26f26868d624a3a0975b4434baf12/src/Core/src/Platform/Windows/MauiNavigationView.cs#L84
Haven't found where it's setting the content though, but I think the solution lies in MAUI.

[CodyLyttle]

Scary, indeed. I've opted to just grab all of the "ContentGrid" children and set the opacity on the lot.
I'll dive into the MAUI source code when I get the chance and look for a more elegant solution.

Thanks for the help.

[CodyLyttle]

I didn't find a way to set the value directly, but I'd like to provide a more sensible band-aid solution for anyone facing the same problem.

public static void MakeFullscreenOverlay(this Window window)
{
    // Other window setup logic goes here.

    // Use low priority to ensure window is loaded before our modifications.
    window.DispatcherQueue.TryEnqueue(DispatcherQueuePriority.Low, () =>
    {
        // The background color is set by several grid elements named "ContentGrid".
        foreach (Grid contentGrid in FindElements<Grid>("ContentGrid", window.Content))
        {
            DependencyObject? parent = VisualTreeHelper.GetParent(contentGrid);

            // However, only grids inside a border affect the background color.
            if (parent is not Border)
                continue;

            // Assign new brushes to prevent changes to elements sharing the existing brush.
            contentGrid.SetValue(Panel.BackgroundProperty,
                new SolidColorBrush(Colors.Transparent));
        }
    });
}

// Use depth-first search to find elements with the specified name and type.
private static IEnumerable<T> FindElements<T>(string targetName, DependencyObject element)
    where T : FrameworkElement
{
    if (element is T match)
    {
        var actualName = (string) match.GetValue(FrameworkElement.NameProperty);
        if (actualName == targetName)
        {
            yield return match;
        }
    }

    int childCount = VisualTreeHelper.GetChildrenCount(element);
    for (var i = 0; i < childCount; i++)
    {
        foreach (T matched in FindElements<T>(targetName, VisualTreeHelper.GetChild(element, i)))
        {
            yield return matched;
        }
    }
}

[CodyLyttle]

Problem solved!
ContentGrid is defined in WinUI NavigationView.xaml.
To set the window background brush, we simply overwrite theme resource "NavigationViewContentBackground".

#if WINDOWS
        builder.ConfigureLifecycleEvents(events =>
        {
            events.AddWindows(lifecycle =>
            {
                lifecycle.OnWindowCreated(window =>
                {
                    window.SystemBackdrop = new TransparentTintBackdrop();

                    Microsoft.UI.Xaml.Application.Current.Resources["NavigationViewContentBackground"] =
                        new Microsoft.UI.Xaml.Media.SolidColorBrush(Microsoft.UI.Colors.Transparent);
                });
            });
        });
#endif