feat: fullscreen mode

Author: andrewbabbittdev

README.md

@@ -169,5 +169,7 @@ Here is an example changing `MainLayout.razor`:
 }
 ```
 
+To support fullscreen mode, you should also hide your custom window chrome when in fullscreen. You can check the current fullscreen status using the `IsFullscreen` property on the window. You can also monitor for it changing using the `OnFullscreenChanged` event.
+
 ## Issues
 Under the hood, Blazor Desktop uses WebView2 which has limitations right now with composition. Due to this, if you disable the window border through the `Window.UseFrame(false)` API, the top edge of the window is unusable as a resizing zone for the window. However all the other corners and edges work.

src/BlazorDesktop/Services/BlazorDesktopService.cs

@@ -2,6 +2,7 @@
 // The .NET Extension Contributors licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using BlazorDesktop.Wpf;
 using System.Diagnostics.CodeAnalysis;
 using System.Reflection;
 using System.Windows;
@@ -68,7 +69,7 @@ public Task StopAsync(CancellationToken cancellationToken)
     private void ApplicationThread()
     {
         var app = _services.GetRequiredService<Application>();
-        var mainWindow = _services.GetRequiredService<Window>();
+        var mainWindow = _services.GetRequiredService<BlazorDesktopWindow>();
 
         app.Startup += OnApplicationStartup;
         app.Exit += OnApplicationExit;

src/BlazorDesktop/Wpf/BlazorDesktopWindow.cs

@@ -6,6 +6,7 @@
 using System.Runtime.InteropServices;
 using System.Windows;
 using System.Windows.Controls;
+using System.Windows.Input;
 using System.Windows.Interop;
 using System.Windows.Media;
 using System.Windows.Media.Imaging;
@@ -32,6 +33,18 @@ public partial class BlazorDesktopWindow : Window
     /// </summary>
     public Border WebViewBorder { get; }
 
+    /// <summary>
+    /// If the window is fullscreen.
+    /// </summary>
+    public bool IsFullscreen => _fullscreen && WindowState == WindowState.Normal;
+
+    /// <summary>
+    /// Occurs when <see cref="IsFullscreen"/> changes.
+    /// </summary>
+    public event EventHandler<bool>? OnFullscreenChanged;
+
+    private bool _fullscreen;
+    private WindowState _fullscreenStoredState = WindowState.Normal;
     private readonly IServiceProvider _services;
     private readonly IConfiguration _config;
     private readonly IWebHostEnvironment _environment;
@@ -73,6 +86,40 @@ public BlazorDesktopWindow(IServiceProvider services, IConfiguration config, IWe
         InitializeTheming();
     }
 
+    /// <summary>
+    /// Toggles fullscreen mode.
+    /// </summary>
+    public void ToggleFullScreen()
+    {
+        if (WindowStyle == WindowStyle.SingleBorderWindow)
+        {
+            _fullscreen = true;
+            _fullscreenStoredState = WindowState;
+
+            UseFrame(_config.GetValue<bool?>(WindowDefaults.Frame) ?? true, _fullscreen);
+            WindowStyle = WindowStyle.None;
+
+            if (WindowState == WindowState.Maximized)
+            {
+                WindowState = WindowState.Normal;
+            }
+
+            WindowState = WindowState.Maximized;
+
+            OnFullscreenChanged?.Invoke(this, IsFullscreen);
+        }
+        else
+        {
+            _fullscreen = false;
+
+            UseFrame(_config.GetValue<bool?>(WindowDefaults.Frame) ?? true, _fullscreen);
+            WindowStyle = WindowStyle.SingleBorderWindow;
+            WindowState = _fullscreenStoredState;
+
+            OnFullscreenChanged?.Invoke(this, IsFullscreen);
+        }
+    }
+
     private void InitializeWindow()
     {
         var height = _config.GetValue<int?>(WindowDefaults.Height) ?? 768;
@@ -143,11 +190,12 @@ private void InitializeWindow()
         MinWidth = minWidth;
         MaxHeight = maxHeight;
         MaxWidth = maxWidth;
-        UseFrame(useFrame);
+        UseFrame(useFrame, _fullscreen);
         ResizeMode = (_config.GetValue<bool?>(WindowDefaults.Resizable) ?? true) ? ResizeMode.CanResize : ResizeMode.NoResize;
         UseIcon(_config.GetValue<string?>(WindowDefaults.Icon) ?? string.Empty);
         Content = WebViewBorder;
         StateChanged += WindowStateChanged;
+        KeyDown += WindowKeyDown;
     }
 
     private void InitializeWebViewBorder()
@@ -188,6 +236,14 @@ private void WindowStateChanged(object? sender, EventArgs e)
         UpdateWebViewBorderThickness();
     }
 
+    private void WindowKeyDown(object sender, KeyEventArgs e)
+    {
+        if (e.Key == Key.F11)
+        {
+            ToggleFullScreen();
+        }
+    }
+
     private void WindowSourceInitialized(object? sender, EventArgs e)
     {
         UpdateTheme();
@@ -204,7 +260,7 @@ private void UpdateWebViewBorderThickness()
 
         WebViewBorder.BorderThickness = new Thickness(20, 20, 20, 20);
 
-        if (WindowState == WindowState.Maximized && !useFrame)
+        if (WindowState == WindowState.Maximized && !useFrame && !_fullscreen)
         {
             WebViewBorder.BorderThickness = new Thickness(8, 8, 8, 8);
         }
@@ -232,11 +288,18 @@ private void UpdateTheme()
         }
     }
 
-    private void UseFrame(bool frame)
+    private void UseFrame(bool frame, bool fullscreen)
     {
         if (!frame)
         {
-            WindowChrome.SetWindowChrome(this, new() { NonClientFrameEdges = NonClientFrameEdges.Bottom | NonClientFrameEdges.Left | NonClientFrameEdges.Right });
+            if (fullscreen)
+            {
+                WindowChrome.SetWindowChrome(this, new() { NonClientFrameEdges = NonClientFrameEdges.None });
+            }
+            else
+            {
+                WindowChrome.SetWindowChrome(this, new() { NonClientFrameEdges = NonClientFrameEdges.Bottom | NonClientFrameEdges.Left | NonClientFrameEdges.Right });
+            }
         }
     }