[Enhancement] Placing WPF Controls on top of BlazorWebView for a movable / draggable window

[Hecatron]

Hi,
I've recently been messing with the BlazorWebView with WinForms and WPF
I experimented with trying to remove the default window title bar at the top under WPF
then implementing my own close / maximise / minimise buttons etc inside Blazor which all worked and was awesome

However one stumbling block was implementing the ability to drag / move the window
Typically DragMove() under WPF only works when you're clicking on a WPF control and not the BlazorWebView
So the answer would seem to be to place a invisible WPF region on top of the BlazorWebView control which could be used to drag / move the window around
Currently however I don't think it's possible to place WPF controls above BlazorWebView even using ZIndex

I realise it's still early days yet
But it's fairly awesome to work with and the Blazor code is very simple especially when using MudBlazor controls
Perhaps a custom drag handler would be a different option (which is the way they do it under Chromely)
I figured the maui repo might be the best place for this considering the code was recently moved over

This may be related to
dotnet/aspnetcore#27239
https://github.com/dotnet/aspnetcore/issues/27217

[Hecatron]

The other thing is the resize edges of the window also tend to be a bit small unless you put a border around the window even with ResizeBorderThickness="5"
I think the BlazorWebView is sort of sitting on top of / overlapping the WindowChrome.WindowChrome section around the window

<Window x:Class="TestApp.App.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestApp.App"
        xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
        mc:Ignorable="d"
        WindowStyle="None"
        ResizeMode="CanResizeWithGrip"
        BorderThickness="5" 
        BorderBrush="Black"
        AllowsTransparency="True"
        Title="MainWindow" Height="600" Width="1000" MouseDown="Window_MouseDown" MouseMove="Window_MouseMove">

    <WindowChrome.WindowChrome>
        <WindowChrome GlassFrameThickness="0" CornerRadius="0" CaptionHeight="0" ResizeBorderThickness="5"/>
    </WindowChrome.WindowChrome>
    <blazor:BlazorWebView HostPage="wwwroot/index.html" Services="{StaticResource services}" MouseDown="BlazorWebView_MouseDown" Name="MainView">
            <blazor:BlazorWebView.RootComponents>
                <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:AppRoot}" />
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>
</Window>

[Hecatron]

For anyone else interested in implementing you're own close / maximise buttons etc
it's pretty simple.

Desktop Handler Class

using System.Windows;

namespace TestApp.Desktop {

    /// <summary> A desktop handler for handling close / restore / maximise / minimise etc of the Main WPF Window. </summary>
    public class DesktopWinHandler {

        private Window MainWindow { get; set; }

        /// <summary> Constructor. </summary>
        /// <param name="win"> The main window to control. </param>
        public DesktopWinHandler(Window win) {
            MainWindow = win;
        }

        /// <summary> Closes the window. </summary>
        public void Close() {
            MainWindow.Close();
        }

        /// <summary> Minimise the window. </summary>
        public void Minimise() {
            MainWindow.WindowState = WindowState.Minimized;
        }

        /// <summary> Toggle between maximised and restored. </summary>
        public void MaxRestore() {
            if (MainWindow.WindowState == WindowState.Maximized) {
                MainWindow.WindowState = WindowState.Normal;
            }
            else {
                MainWindow.WindowState = WindowState.Maximized;
            }
        }

        /// <summary> Gets restore icon. </summary>
        /// <returns> The restore icon. </returns>
        public string GetRestoreIcon() {
            if (MainWindow == null)
                return null;
            if (MainWindow.WindowState == WindowState.Maximized) {
                return "mdi mdi-window-maximize mdi-18px";
            }
            else if (MainWindow.WindowState == WindowState.Normal) {
                return "mdi mdi-window-restore mdi-18px";
            }
            return null;
        }
    }
}

Then just implement something like this in the blazor control (I'm using material design icons)

        private DesktopWinHandler DesktopHandler { get; set; }

        protected override void OnInitialized() {
            DesktopHandler = new DesktopWinHandler(Application.Current.MainWindow);
        }

        /// <summary> Minimise the window. </summary>
        private void MinimiseWindow() {
            DesktopHandler.Minimise();
        }

        /// <summary> Toggle between maximised and restored. </summary>
        private void MaxRestoreToggleWindow() {
            DesktopHandler.MaxRestore();
        }

        /// <summary> Closes the window. </summary>
        private void CloseWindow() {
            DesktopHandler.Close();
        }

        private string _restoreIcon {
            get {
                return DesktopHandler.GetRestoreIcon();
            }
            set { }
        }

[Eilon]

Hi @grbd , this looks pretty neat what you've been able to do with doing all the UI in Blazor! It seems that WebView2 for WPF has some known limits with "composition" as seen in these issues:

• WebBrowser overlaps other controls in WPF? - WebBrowser overlaps other controls in WPF? MicrosoftEdge/WebView2Feedback#356
• Feature request: WPF WebView2 compositioning - Feature request: WPF WebView2 compositioning MicrosoftEdge/WebView2Feedback#197
• (Possibly related) Webview on transparent WPF regions does not hittest. - Webview on transparent WPF regions does not hittest. MicrosoftEdge/WebView2Feedback#997

As a workaround, I wonder if instead of trying to overlay a WPF control on top of the BlazorWebView, you could handle even the moving/dragging from within the Blazor code? Ultimately if you can handle the HTML/DOM events within the Blazor UI, you can call directly into WPF/Win32/MAUI APIs to move the parent window within the screen, so maybe that could work?

[Hecatron]

Hi Eilon,
I already tried that one (triggering the drag within blazor, then trying to do a move of the window within blazor)
It pretty much lagged like crazy with the window jumping about

Another thing I tried was triggering the wpf related DragMove() from blazor.
But wpf checks to see if you're clicking on an actual wpf control and throws an exception otherwise. (which it does with the webview2 control). So that's a no go unless something is added to wpf to get around that.

• https://docs.microsoft.com/en-us/dotnet/api/system.windows.window.dragmove?view=net-5.0

I didn't get as far as trying with a Maui project.

[Eilon]

Ah yes I was wondering if it would be laggy... I guess so. I'm afraid that this is more in the realm of the WebView2 itself, for which the issues logged in the https://github.com/MicrosoftEdge/WebView2Feedback/ repo are the best bet. Of course you could go back to having WPF render the title/min/max, but then you lose some of the fine-grained control (but you do gain various consistency benefits that are common to other Windows apps).

I'm closing this issue here because there isn't anything we can control for this scenario in the code in this repo.