Add input pass-through (not click-through) through transparent parts of a WinUI 3 window.

[alegnicitrix]

Is there any way to add input passthrough through the transparent parts of a WinUI3 window? I don't just mean allow mouse clicks to go through the transparent bits, but ALL input like mouse move or drag, etc.

I have been looking at this problem for a few days, but I haven't been able to get it to work.

I want to be able to do something like the following WPF example (https://stackoverflow.com/a/77480302):

Here is some sample code I am using:

MainWindow.xaml:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="MockingWindow.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MockingWindow"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="MockingWindow">

    <Border BorderThickness="2" BorderBrush="#FF00FF">
        <Canvas x:Name="canvas" Background="Transparent">
            <Canvas.Resources>
                <Style TargetType="Button">
                    <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
                    <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>
                </Style>
                <Style TargetType="StackPanel">
                    <Setter Property="Background" Value="{StaticResource ApplicationPageBackgroundThemeBrush}"/>
                    <Setter Property="Padding" Value="4"/>
                    <Setter Property="Spacing" Value="4"/>
                </Style>
            </Canvas.Resources>
            <Grid x:Name="toolbar" Background="#00FF00">
                <StackPanel Margin="8" Orientation="Horizontal">
                    <Button x:Name="button_refersh" Content="Refresh"/>
                    <Button x:Name="button_exit" Content="Exit" Click="button_exit_Click"/>
                </StackPanel>
            </Grid>
        </Canvas>
    </Border>
</Window>

MainWindow.xaml.cs:

using Microsoft.UI.Windowing;
using Microsoft.UI.Xaml;
using Windows.Win32.Foundation;
using Windows.Win32.Graphics.Dwm;
using Windows.Win32.UI.WindowsAndMessaging;
using WinUIEx;
using static Windows.Win32.PInvoke;

namespace MockingWindow;

public sealed partial class MainWindow : Window
{
    public readonly WindowManager Manager;

    public MainWindow()
    {
        InitializeComponent();

        ExtendsContentIntoTitleBar = true;
        SystemBackdrop = new TransparentTintBackdrop(Windows.UI.Color.FromArgb(0x00, 0xFF, 0x00, 0xFF));

        Manager = WindowManager.Get(this);
        Manager.MinWidth = 0;
        Manager.MinHeight = 0;
        Manager.IsAlwaysOnTop = true;
        Manager.IsMaximizable = false;
        Manager.IsMinimizable = false;
        Manager.IsResizable = false;
        Manager.PresenterKind = AppWindowPresenterKind.Overlapped;

        var op = Manager.AppWindow.Presenter as OverlappedPresenter;
        op?.SetBorderAndTitleBar(false, false);

        var style = WindowStyle.TabStop | WindowStyle.Group | WindowStyle.ClipSiblings;
        this.SetWindowStyle(style);

        var exstyle = ExtendedWindowStyle.ToolWindow | ExtendedWindowStyle.Layered;
        this.SetExtendedWindowStyle(exstyle);

        var hwnd = (HWND)this.GetWindowHandle();

        // Disable rounded corners. This also has the effect of removing small thin border created
        // around the window. The order in which this function is called is important.
        unsafe
        {
            uint pref = (uint)DWM_WINDOW_CORNER_PREFERENCE.DWMWCP_DONOTROUND;
            DwmSetWindowAttribute(hwnd, DWMWINDOWATTRIBUTE.DWMWA_WINDOW_CORNER_PREFERENCE, &pref, sizeof(uint));
            var flags = SET_WINDOW_POS_FLAGS.SWP_NOZORDER
                | SET_WINDOW_POS_FLAGS.SWP_NOMOVE
                | SET_WINDOW_POS_FLAGS.SWP_NOSIZE
                | SET_WINDOW_POS_FLAGS.SWP_NOACTIVATE
                | SET_WINDOW_POS_FLAGS.SWP_FRAMECHANGED;
            SetWindowPos(hwnd, HWND.Null, 0, 0, 0, 0, flags);
        }

        // Allows input pass-through, but through the entire window (even the non-transparent parts)!
        SetWindowTransparent(hwnd);

        // Disables input pass-through.
        //SetWindowNormal(hwnd);
    }

    private static void SetWindowTransparent(HWND hwnd)
    {
        var extendedStyle = (WINDOW_EX_STYLE)GetWindowLong(hwnd, WINDOW_LONG_PTR_INDEX.GWL_EXSTYLE);
        extendedStyle |= WINDOW_EX_STYLE.WS_EX_TRANSPARENT;
        SetWindowLong(hwnd, WINDOW_LONG_PTR_INDEX.GWL_EXSTYLE, (int)extendedStyle);
    }

    private static void SetWindowNormal(HWND hwnd)
    {
        var extendedStyle = (WINDOW_EX_STYLE)GetWindowLong(hwnd, WINDOW_LONG_PTR_INDEX.GWL_EXSTYLE);
        extendedStyle &= ~WINDOW_EX_STYLE.WS_EX_TRANSPARENT;
        SetWindowLong(hwnd, WINDOW_LONG_PTR_INDEX.GWL_EXSTYLE, (int)extendedStyle);
    }

    private void button_exit_Click(object sender, RoutedEventArgs e)
    {
        App.Current.Exit();
    }
}

[lgztx96]

The solution shown in the WPF example is also valid in WinUI.There is no difference between them.

       public static void SetWindowExTransparent(IntPtr hwnd)
        {
            var extendedStyle = GetWindowLong(hwnd, GWL_EXSTYLE);
            SetWindowLong(hwnd, GWL_EXSTYLE, extendedStyle | WS_EX_TRANSPARENT);
        }

        public static void SetWindowExNormal(IntPtr hwnd)
        {
            int extendedStyle = GetWindowLong(hwnd, GWL_EXSTYLE);
            SetWindowLong(hwnd, GWL_EXSTYLE, extendedStyle & ~WS_EX_TRANSPARENT);
        }

[alegnicitrix]

Using SetWindowExTransparent makes the WinUI window completely passthrough, even the non-transparent pieces. But, I only want the transparent pieces to be passthrough.

[alegnicitrix]

I have edited the sample code I provide to show a working example with WPF and non-working example with WinUI. Code examples provided below:

test.zip

[castorix]

A way in WinUI 3 is with Regions (test done in the other thread : #1247 (comment))
But using an API which is >30 years old is not great; there should be a better method....

[alegnicitrix]

@castorix , I tried your WinUI3_SwapChainPanel_Layered example, but I did not see it use regions. This example provides click-through, but not all other input events (like mouse hover), which is what I would like to do. Was this the sample code you were referencing in your post?

[castorix]

@castorix , I tried your WinUI3_SwapChainPanel_Layered example, but I did not see it use regions. This example provides click-through, but not all other input events (like mouse hover), which is what I would like to do. Was this the sample code you were referencing in your post?

I did not post a sample code yet, I had just tested quickly by adding a region with CreateRectRgn to check if it worked (on "Microsoft.UI.Content.DesktopChildSiteBridge" window with SetWindowRgn after CombineRgn (for the "hole"))
I hoped a better method would be found before I update the sample or I post another one...

[DarranRowe]

I believe this will never work.

WinUI 3 uses composition to draw its contents. The drawing is hardware accelerated and drawn using Direct3D. This means that the contents will never really be seen by the window itself. This means that the window will never know how to pass input through.

This is easy to reproduce if you fall back to a Windows API window. If you create the windows using CreateWindowEx with the WS_EX_NOREDIRECTIONBITMAP ex style, and then use either DirectComposition, or Windows.UI.Composition and Direct3D/Direct2D to draw transparent images to the screen, input will never go through. The window does not have access to the video memory that backs the window content so it is unable to check the alpha for the pixels.

[alegnicitrix]

Thank you @castorix ! I finally got it to work thanks to your suggestion of using regions.

I used something like this after my toolbar control is loaded in my example:

    private void CreateTransparencyRegions()
    {
        // Create region for the border.
        var hwnd = (HWND)this.GetWindowHandle();
        var region1 = CreateRectRgn(0, 0, AppWindow.Size.Width, AppWindow.Size.Height);
        var region2 = CreateRectRgn(
            (int)(0 + border.BorderThickness.Left),
            (int)(0 + border.BorderThickness.Top),
            (int)(AppWindow.Size.Width - border.BorderThickness.Right),
            (int)(AppWindow.Size.Height - border.BorderThickness.Bottom));
        var region_border = CreateRectRgn(0, 0, 0, 0);
        CombineRgn(region_border, region1, region2, RGN_COMBINE_MODE.RGN_DIFF);

        // Create region for the toolbar and combine it with the border region.
        var region_toolbar = CreateRectRgn(
            (int)toolbar.ActualOffset.X,
            (int)toolbar.ActualOffset.Y,
            (int)(toolbar.ActualOffset.X + toolbar.ActualWidth),
            (int)(toolbar.ActualOffset.X + toolbar.ActualHeight));
        var region_final = CreateRectRgn(0, 0, 0, 0);
        CombineRgn(region_final, region_border, region_toolbar, RGN_COMBINE_MODE.RGN_OR);

        // Set the final region to the window.
        SetWindowRgn(hwnd, region_final, true);

        // Clean up.
        DeleteObject(region1);
        DeleteObject(region2);
        DeleteObject(region_border);
        DeleteObject(region_toolbar);
        DeleteObject(region_final);
    }

Here is the full example of a working project with WinUI3 using regions to enable input through transparent regions:
MockingWindowWinUI_Regions.zip

I will have to actively manage the region of the window as I move children controls inside my window or show dialogs, dropdowns, tooltips, or other controls, etc.

It feels like this is something that could have been easily turned into a feature to bring WinUI3 closer to parity with WPF:

• The Window class can have a boolean property (e.g. AllowTransparencyInput, input falls through transparent regions to the window behind it).
• The framework can easily calculate what regions are visible by navigating the visual tree during key events and check which UIElements have Transparent colors. At the end of this traversal, if AllowTransparencyInput is enabled, then use SetWindowRgn to set region of the window to the visible region that was calculated.