[HELP] How to specify a fixed size for the application window? (.NET MAUI Blazor WinUI)

[jwiggenhorn]

Hi, I'm working on an application using the .NET MAUI Blazor template. This application is mainly targeting Windows and I'd like to be able to specify a fixed application window size. Is this currently possible?

I'm able to set the size of the BlazorWebView within MainPage.xaml using the WidthRequest and HeightRequest properties but this does not affect the overall window size.

[jwiggenhorn]

For anyone else having this issue, here's what ended up working for me:

// App.xaml.cs

	public App()
	{
		InitializeComponent();

                Microsoft.Maui.Handlers.WindowHandler.WindowMapper[nameof(IWindow)] = (handler, view) =>
                {
#if WINDOWS
                	var nativeWindow = handler.NativeView;
            		nativeWindow.Activate();
            		IntPtr windowHandle = PInvoke.User32.GetActiveWindow();

            		PInvoke.User32.SetWindowPos(windowHandle, 
					PInvoke.User32.SpecialWindowHandles.HWND_TOP,
                                        0, 0, width, height,  // width and height are ints
                                        PInvoke.User32.SetWindowPosFlags.SWP_NOMOVE);
#endif
        	};
    	}

[Crauzer]

I refuse to believe there's no better solution that this, because having to call a native API is fairly ugly for such a simple thing.

[jwiggenhorn]

@Crauzer Yeah if you've got something better I'd love to see it.

[PaulChek]

not working in preview 12

[kla50]

The following is working for me in Preview 12. Added this code to the MauiProgram.CreateMauiApp method. "builder" is the MauiAppBuilder instance and "appSettings" is my settings implementation. This restores the app window to the position and size it was at when it was closed in the previous session (works across multiple monitors).

#if WINDOWS
builder.ConfigureLifecycleEvents(events => {
events.AddWindows(wndLifeCycleBuilder => {
wndLifeCycleBuilder.OnWindowCreated(window => {
IntPtr hwnd = WinRT.Interop.WindowNative.GetWindowHandle(window);
PInvoke.User32.SetWindowPos(hwnd, PInvoke.User32.SpecialWindowHandles.HWND_TOP,
(Int32)appSettings.WindowsSettings.AppWindow.X, (Int32)appSettings.WindowsSettings.AppWindow.Y, (Int32)appSettings.WindowsSettings.AppWindow.Width, (Int32)appSettings.WindowsSettings.AppWindow.Height,
PInvoke.User32.SetWindowPosFlags.SWP_SHOWWINDOW);
});
wndLifeCycleBuilder.OnClosed((window, args) => {
IntPtr hwnd = WinRT.Interop.WindowNative.GetWindowHandle(window);
if(PInvoke.User32.GetWindowRect(hwnd, out PInvoke.RECT rect1)) {
appSettings.WindowsSettings.AppWindow.X = rect1.left;
appSettings.WindowsSettings.AppWindow.Y = rect1.top;
appSettings.WindowsSettings.AppWindow.Width = rect1.right - rect1.left;
appSettings.WindowsSettings.AppWindow.Height = rect1.bottom - rect1.top;
}
appSettings.SaveSettings();
});
});
});
#endif

[Xyncgas]

Would be nice if we can call MAUI API instead of platform specific
Unlike maintaining a bunch of components, it's basic layout, I understand not every platform let you adjust windows size but you can just do nothing if it's not supported (no exception, return void, add separate method for checking whether the platform supports specifying window sizes)

[nor0x]

I have another option that doesn't rely on PInvoke directly and works >preview12. To work with AppWindow from Microsoft.UI.Windowing you need to get the WindowId from the window handle.

The AppWindow object provides functionality like Resize or MoveAndResize

        Microsoft.Maui.Handlers.WindowHandler.Mapper.AppendToMapping(nameof(IWindow), (handler, view) =>
        {
#if WINDOWS
            var nativeWindow = handler.PlatformView;
            nativeWindow.Activate();
            IntPtr hWnd = WinRT.Interop.WindowNative.GetWindowHandle(nativeWindow);
            WindowId windowId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(hWnd);
            AppWindow appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(windowId);
            //TODO: this is hardcoded stuff for fullhd
            appWindow.MoveAndResize(new Windows.Graphics.RectInt32((1920 / 2) - width / 2, (1080 / 2) - height / 2, width, height));
#endif

[ItsOswin]

So I tried this and saw theres a winuiAppWindow.Titlebar but it always stays null is there a way to get it ? I want to say ExtendsViewIntoTitlebar

[LanceMcCarthy]

@ItsOswin TitleBar features are still planned.

• You can see the WinApp SDK roadmap here => https://portal.productboard.com/winappsdk/1-windows-app-sdk/tabs/2-planned
• The planned Titlebar item is here => https://portal.productboard.com/winappsdk/1-windows-app-sdk/c/64-improved-default-and-custom-title-bar-via-windowing-apis

[ToolmakerSteve]

Updated for Maui GA:

public partial class App : Application
{
    const int WindowWidth = 400;
    const int WindowHeight = 300;
	public App()
	{
		InitializeComponent();

        Microsoft.Maui.Handlers.WindowHandler.Mapper.AppendToMapping(nameof(IWindow), (handler, view) =>
        {
#if WINDOWS
            var mauiWindow = handler.VirtualView;
            var nativeWindow = handler.PlatformView;
            nativeWindow.Activate();
            IntPtr windowHandle = WinRT.Interop.WindowNative.GetWindowHandle(nativeWindow);
            WindowId windowId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(windowHandle);
            AppWindow appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(windowId);
            appWindow.Resize(new SizeInt32(WindowWidth, WindowHeight));
#endif
        });

        MainPage = new MainPage();
    }

[sellorio2]

This fails to compile in my MAUI app that I created using the latest preview of Visual Studio 2 days ago (I'm pretty sure it's the bleeding edge still).

I don't know if it's relevant but I used the MAUI Blazor template.

error CS0246: The type or namespace name 'WindowId' could not be found (are you missing a using directive or an assembly reference?)
error CS0246: The type or namespace name 'AppWindow' could not be found (are you missing a using directive or an assembly reference?)
error CS0246: The type or namespace name 'SizeInt32' could not be found (are you missing a using directive or an assembly reference?)

[sabre230]

Adding this to the top of the file got it working for me.

#if WINDOWS
using Microsoft.UI;
using Microsoft.UI.Windowing;
using Windows.Graphics;
#endif

[coderbasket]

There is a library here... with enums. css styling in c# and some cal().
each css enums has documentation and example along with various posible style values.
https://github.com/coderbasket/StylerCode.Css

[nogginbox]

This looks like a generic CSS generation library and does not answer the question related to Blazor and WinUI.

[kla50]

I haven't worked with Blazor, but for WinUI I created the following extension method. The WindowSettings type contains the position and size of the window and is part of my settings implementation. T is the root settings type that represents the entire appsettings.json file. You'll need to replace this settings stuff with your settings implementation.

public static class WindowExtensions {
public static void TrackWindowLocationAndSize(this Window wnd_, WindowSettings wndSettings_) where T : BaseSettings {
IntPtr hwnd = WinRT.Interop.WindowNative.GetWindowHandle(wnd_);
PInvoke.User32.SetWindowPos(hwnd, PInvoke.User32.SpecialWindowHandles.HWND_TOP,
(Int32)wndSettings_.X, (Int32)wndSettings_.Y, (Int32)wndSettings_.Width, (Int32)wndSettings_.Height,
PInvoke.User32.SetWindowPosFlags.SWP_SHOWWINDOW);

	wnd_.Closed += (Object sender, WindowEventArgs args) => {
		IntPtr hwnd = WinRT.Interop.WindowNative.GetWindowHandle(wnd_);
		if(PInvoke.User32.GetWindowRect(hwnd, out PInvoke.RECT rect1)) {
			wndSettings_.X = rect1.left;
			wndSettings_.Y = rect1.top;
			wndSettings_.Width = rect1.right - rect1.left;
			wndSettings_.Height = rect1.bottom - rect1.top;
		}
		SettingsManager<T>.Current.Settings.Save();
	};
}

}

Add a call this method to the application's window constructor:

public sealed partial class MainWindow : Window {
internal MainWindowViewModel ViewModel { get; private set; }

public MainWindow(MainWindowViewModel viewModel_, WindowSettings wndSettings_) {
	InitializeComponent();
	ViewModel = viewModel_;
	this.TrackWindowLocationAndSize<WinUI3Play01Settings>(wndSettings_);
}

}

[ToolmakerSteve]

Updated for Maui GA:

public partial class App : Application
{
    const int WindowWidth = 400;
    const int WindowHeight = 300;
	public App()
	{
		InitializeComponent();

        Microsoft.Maui.Handlers.WindowHandler.Mapper.AppendToMapping(nameof(IWindow), (handler, view) =>
        {
#if WINDOWS
            var mauiWindow = handler.VirtualView;
            var nativeWindow = handler.PlatformView;
            nativeWindow.Activate();
            IntPtr windowHandle = WinRT.Interop.WindowNative.GetWindowHandle(nativeWindow);
            WindowId windowId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(windowHandle);
            AppWindow appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(windowId);
            appWindow.Resize(new SizeInt32(WindowWidth, WindowHeight));
#endif
        });

        MainPage = new MainPage();
    }

---

OR if want to base it on requested dimensions of MainPage, before appending handler could do:

        MainPage = new MainPage();
        var width = (int)MainPage.WidthRequest;
        var height = (int)MainPage.HeightRequest;

then use those dimensions (probably add some padding to get whole window size, because MainPage is client area).

[Ewerton]

Can you supply the full App.xaml.cs file, please? I need the usings and related References to resolve the issues noted below. I am using VS Community 17.3 preview 1.1. My app is pretty close to a File | New .Net MAUI App, and works well enough aside from this.

@billn6 You could write this code inside the YourProject\Platforms\Windows\App.xaml.cs file. Then you dont need do worry about usings. This make more sense since you are changing just the Windows windows size.

[billn6]

@Ewerton, thanks, but that was inside the App.xaml.cs. I'm eager to hear back from @ToolmakerSteve, or see your working App.xaml.cs code if you have it available.

[billn6]

Thanks, @LanceMcCarthy. I might give that a try after I hear back from @ToolmakerSteve

[gfmoore]

That worked great, thanks. Just had to add a

using Microsoft.UI.Windowing;

And because someone else will want to know I found that to position the window using

      appWindow.Move(new PointInt32(50,50));

seemed to work fine :)

[asmtzl]

ı did it, but how can ı lock the window. (ı dont want to user can change the size of window's height and width)

[pierre01]

It would be nice if someone publishes and make available the best practices for Desktop and Tablet Idioms.

[LanceMcCarthy]

@phollyer That error means you're missing a using statement. You can use VS IntelliSense (wait for lightbulb, then expand it... the tool should provide you with an option to add the missing using) or just copy from my demo here https://github.com/LanceMcCarthy/DevOpsExamples/blob/e66fa19aea5991158a2affbbc68efd3ea67b81e1/src/MAUI/MauiDemo/MauiProgram.cs#L2

[phollyer]

I was missing the following:

using Microsoft.Maui.LifecycleEvents;

#if WINDOWS
using WinUIEx;

#elif MACCATALYST
using CoreGraphics;
using UIKit;

#elif IOS
#elif ANDROID
#elif TIZEN

#endif

The app now compiles - but the maximum and minimum screen sizes aren't respected. I can still resize the window at will.

(Only tested for MacCatalyst)

[phollyer]

@LanceMcCarthy Definitely not getting any control over the window size for MacCatalyst.

Screen.Recording.2023-08-14.at.11.59.33.mov

using Microsoft.Extensions.Logging;
using Microsoft.Maui.LifecycleEvents;

#if WINDOWS
using WinUIEx;

#elif MACCATALYST
using CoreGraphics;
using UIKit;

#elif IOS
#elif ANDROID
#elif TIZEN

#endif

namespace MauiPlayground;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

#if DEBUG
		builder.Logging.AddDebug();
#endif

        // Needs using Microsoft.Maui.LifecycleEvents for this extension method
        builder.ConfigureLifecycleEvents(events =>
        {
#if WINDOWS
            // using WinUIEx
            events.AddWindows(wndLifeCycleBuilder =>
            {
                wndLifeCycleBuilder.OnWindowCreated(window =>
                {
                    window.CenterOnScreen(1024,768); //uses WinUIEx
                });
            });

#elif MACCATALYST            
            // Using CoreGraphics and UIKit
            events.AddiOS(wndLifeCycleBuilder =>
            {
                wndLifeCycleBuilder.SceneWillConnect((scene, session, options) =>
                {
                    if (scene is UIWindowScene { SizeRestrictions: { } } windowScene)
                    {
                        windowScene.SizeRestrictions.MaximumSize = new CGSize(1200, 900);
                        windowScene.SizeRestrictions.MinimumSize = new CGSize(600, 400);
                    }
                });

            });
#endif
        });

        return builder.Build();
	}
}

Demo: https://github.com/phollyer/MauiPlayground/tree/FixedWindowSize

Is this a bug, or my code?

Thanks

[LanceMcCarthy]

@phollyer

Is this a bug, or my code?

I haven't been able to get much to work on maccatalyst in a while. I can't really recall when it did work, maybe MauiVersion 56 or 82.

I decided to stop developing it and wait for .NET8, there have just been too many regressions for Desktop in the past 6-9 months

[phollyer]

Ok thanks for the info.

[smourier]

FWIW, with latest MAUI (& WinAppSDK/WinUI3), it's much simpler, here is a full App.xaml.cs example:

using Microsoft.Maui.Platform;
using Windows.Graphics;

namespace MyApp
{
    public partial class App : MauiWinUIApplication
    {
        public App()
        {
            this.InitializeComponent();
            Microsoft.Maui.Handlers.WindowHandler.Mapper.AppendToMapping(nameof(IWindow), (handler, view) =>
            {
                handler.PlatformView.GetAppWindow().Resize(new SizeInt32(800, 400));
            });
        }

        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
    }
}

It uses the GetAppWindow extension method from Microsoft.Maui.Platform.WindowExtensions class

[IT-VBFK]

I have a similar problem, but in my case my app window shrinks when running the app inside a remote session via a macBook Pro with retina display.

How can I achieve that my app window appears in same size in relation to screen width/height?
I know I can do some sort of calculation, but there must be a better method than that.