Making Blazor MAUI work with Responsive Design / Bootstrap

[pjmagee]

Since the Blazor WebView2 control doesnt seem to update based on the Window size changing. I tried to set the Window to a fixed size but cannot find where to do that?

What i plan on doing is setting a fixed width/height kind of like a Tablet Size so it will be a desktop App but around 1920x1080 that way I can style it to this set dimension and work on a responsive design later.

[pjmagee]

Okay so I ended up with something like this....can someone tell me on a scale of 1 to 10 how awful this is and if Maui would somehow incorporate a more elegant solution to Maui Blazor with the WebView2 control?

This means no need for fixed width/height and it allows Responsive CSS to happen....no idea if its good or terrible. But it works.

Please no judge me for my code 🙏

.ConfigureLifecycleEvents((context, lifecycle) =>
                {
#if WINDOWS
                    lifecycle
                        .AddWindows(configure =>
                        {
                            configure.OnLaunched((app, args) =>
                            {
                                Platforms.Windows.WindowExtensions.SetIcon(MauiWinUIApplication.Current.MainWindow, "Platforms/Windows/icon.ico");
                                Platforms.Windows.WindowExtensions.MinimizeToTray(MauiWinUIApplication.Current.MainWindow);

                                MauiWinUIApplication.Current.MainWindow.SizeChanged += (sender, e) =>
                                {
                                    App.Current.MainPage.WidthRequest = e.Size.Width;
                                    App.Current.MainPage.HeightRequest = e.Size.Height;
                                };

                                Initializer.Start();
                            });

                            configure.OnVisibilityChanged((window, args) =>
                            {
                                if (args.Visible)
                                {

                                }

                            });

                            configure.OnClosed((window, args) =>
                            {
                                Initializer.Stop();
                            });

                            configure.OnLaunching((app, args) =>
                            {

                            });

                            configure.OnActivated((window, args) =>
                            {    
                                // Woah this is constantly triggering
                                // System.Windows.MessageBox.Show("Launched :-)");
                            });

                        });
#endif

Once that is done......You need to update the BlazorControl

And then you can Change the width and height of the control with a Event when parent size changes...

Now you can drag your Main Window and the Blazor view with allow Responsive CSS to work....

[pjmagee]

@danroth27 Would you say this kind of fix should not be needed with the Blazor WebView Control eventually or is this kind of implementation I have making sense? I noticed the BlazorWeather app wasnt responsive, but if this was applied to your Weather demo I think it would be provided the CSS is responsive.

[Eilon]

Hi @pjmagee I'm quite certain this is just a bug in .NET MAUI and you shouldn't have to write any of this code in a real app. It seems that you found issue #1730, which covers this.