How to passthrough the mouse event at transparent area

[maggch97]

This demo is very helpful. But does anyone know how to passthrough the mouse event at transparent area? I want the mouse can click the window under the transparent area.

I found some document said in WPF, SetLayeredWindowAttributes with green crKey can make the transparent area unclickable, but I don't know how to do that in this demo.

[castorix]

I posted some methods I tested in the thread : microsoft/microsoft-ui-xaml#1247 (comment)
They work, but not very good methods...

[softworkz]

Have you tried SwapChainPanel.CreateCoreIndependentInputSource?

[ShimizuTheLotus]

Hi @maggch97, I think there's a way. to click through UI elements(but still unable to pass through transparent part of images). I used P/Invoke to create a low level mouse event listener to listen to mouse move events. Then when mouse move, it will call this function.

        private void OnGlobalMouseMove(int x, int y)
        {
            var hwnd = WinRT.Interop.WindowNative.GetWindowHandle(this);
            uint dpi = Win32.Window.GetDpiForWindow(hwnd);
            double scaleFactor = dpi / 96.0;
            double dipX = x / scaleFactor;
            double dipY = y / scaleFactor;
            Windows.Foundation.Point clientPoint = new(dipX, dipY);
            var elements = VisualTreeHelper.FindElementsInHostCoordinates(
               clientPoint,
               BaseCanvas
            );
            bool hasInteractiveElement = elements.Any(e =>
                e.IsHitTestVisible);

            if (hasInteractiveElement)
            {
                int exStyle = Win32.Window.GetWindowLong(hwnd, Win32.Window.GWL_EXSTYLE);
                exStyle &= ~WS_EX_TRANSPARENT;
                Win32.Window.SetWindowLong(hwnd, Win32.Window.GWL_EXSTYLE, (int)exStyle);
            }
            else
            {
                int exStyle = Win32.Window.GetWindowLong(hwnd, Win32.Window.GWL_EXSTYLE);
                exStyle |= WS_EX_TRANSPARENT;
                Win32.Window.SetWindowLong(hwnd, Win32.Window.GWL_EXSTYLE, (int)exStyle);
            }
        }

I made a canvas called BaseCanvas and I only detect and place UI elements in this canvas. If there's no UI elements with hit test reachable in this Canvas, We can set WS_EX_TRANSPARENT to this window to make mouse able to pass througn. This also works nicely for a circle or other non-rectangle UI elements. I haven't made a test for an Image control. I think it will consider it as a rectangle.