Blazor Full Screen

user_3797979 0
Viewed 2974

I am new to Blazor and I am trying to figure out how to open up the browser in full screen mode. I know I could do a Javascript interrupt and run Javascript but that defeats the purpose for Blazor.

How could I enter and exit full screen mode in Blazor. Is there a way to do this?

This is the code for full screen mode in Javascript:

https://www.w3schools.com/jsref/met_element_requestfullscreen.asp

 <script>
 /* Get the documentElement (<html>) to display the page in fullscreen */
 var elem = document.documentElement;

 /* View in fullscreen */
 function openFullscreen() {
   if (elem.requestFullscreen) {
     elem.requestFullscreen();
   } else if (elem.mozRequestFullScreen) { /* Firefox */
     elem.mozRequestFullScreen();
   } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
     elem.webkitRequestFullscreen();
   } else if (elem.msRequestFullscreen) { /* IE/Edge */
     elem.msRequestFullscreen();
    }
 }

 /* Close fullscreen */
 function closeFullscreen() {
   if (document.exitFullscreen) {
     document.exitFullscreen();
   } else if (document.mozCancelFullScreen) { /* Firefox */
     document.mozCancelFullScreen();
   } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
     document.webkitExitFullscreen();
   } else if (document.msExitFullscreen) { /* IE/Edge */
     document.msExitFullscreen();
   }
 }
 </script>
blazor-client-side blazor-server-side blazor .net c#
2 Answers

You can use full screen mode in Blazor using PWA option:

enter image description here

Then you should press this install button in right upper corner:

enter image description here

After this you can run it as desktop application in full screen mode:

enter image description here

user_2405640

The accepted answer works for Blazor WASM only. As pointed out in the comments, JS-interop is currently the only option for Blazor Server. Below is a full solution loosely based on the script provided by OP.

public static partial class IJSRuntimeExtensions
    {
        public static async Task<bool> OpenFullscreen(this IJSRuntime jsRuntime)
        {
            return await jsRuntime.InvokeAsync<bool>("openFullscreen");
        }

        public static async Task<bool> CloseFullscreen(this IJSRuntime jsRuntime)
        {
            return await jsRuntime.InvokeAsync<bool>("closeFullscreen");
        }
    }

    function openFullscreen() {
        // attempt to call the browser API
        } else {
            return false;
        }
    }
        

    function closeFullscreen() {
        // attempt to call the br
        } else {
            return false;
        }
    }


    @inject IJSRuntime JS
    
    @*...*@
    
    private async Task HandleClick()
    {
        var succ = await JS.OpenFullscreen();
    }
user_119221210
Related