DotNet MAUI notes

XAML MAUI Web view control

Basic Usage of WebView

The WebView control is simply a control that can display any webpage just by entering the URL. This is particularly helpful when you want to use online resources as part of the elements you deploy on your application.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.WebViewPage">

    <StackLayout>
        <!-- WebView that loads a webpage -->
        <WebView x:Name="MyWebView"
                 Source="https://www.microsoft.com"
                 HeightRequest="600"
                 WidthRequest="400" />
    </StackLayout>
</ContentPage>

Loading Local HTML Content

It is also possible to set the WebView for loading local HTML files. This is okay if you want to display unchanging contents such as help information, terms, conditions, or any content in web that is part of the installation package of the application.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.WebViewPage">

    <StackLayout>
        <!-- WebView to load local HTML content -->
        <WebView x:Name="MyLocalWebView"
                 HeightRequest="600"
                 WidthRequest="400" />
    </StackLayout>
</ContentPage>
namespace MauiAppExample
{
    public partial class WebViewPage : ContentPage
    {
        public WebViewPage()
        {
            InitializeComponent();
            
            // Load local HTML file
            var localHtmlSource = new HtmlWebViewSource
            {
                Html = @"
                <html>
                    <head>
                        <title>Local Page</title>
                    </head>
                    <body>
                        <h1>Welcome to Local HTML Content</h1>
                        <p>This is local content loaded from the app resources.</p>
                    </body>
                </html>"
            };

            MyLocalWebView.Source = localHtmlSource;
        }
    }
}
  • HtmlWebViewSource: Utilized to load HTML as a string as opposed to the actual container. It is especially useful in using small chattable HTML snippets without the need of storing them in other file formats.
  • MyLocalWebView.Source: Sets the HTML content directly to the WebView as its data source.

Loading HTML from a File

Place this file in the Resources/Raw directory of your project.

<!DOCTYPE html>
<html>
<head>
    <title>Local HTML Page</title>
</head>
<body>
    <h1>Welcome to Local HTML File</h1>
    <p>This HTML file is loaded from the app's resources.</p>
</body>
</html>

namespace MauiAppExample
{
    public partial class WebViewPage : ContentPage
    {
        public WebViewPage()
        {
            InitializeComponent();

            // Load HTML file from app resources
            var htmlSource = new HtmlWebViewSource
            {
                BaseUrl = "file:///android_asset/",
                Html = LoadHtmlFile("Resources/Raw/index.html")
            };

            MyLocalWebView.Source = htmlSource;
        }

        private string LoadHtmlFile(string fileName)
        {
            var assembly = typeof(WebViewPage).Assembly;
            using var stream = assembly.GetManifestResourceStream(fileName);
            using var reader = new StreamReader(stream);
            return reader.ReadToEnd();
        }
    }
}
  • Loading from Resources: The LoadHtmlFile method loads the HTML file from the project resources and sets the result of the download as the WebView source.
  • BaseUrl: Supports referring other resources, for instance CSS and JavaScript files in relation to the base HTML loaded.

Interacting with JavaScript in WebView

It is possible to refer to any HTML content in the WebView, and to call JavaScript from the C# code-behind page or from the HTML page calling the latter.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Interaction</title>
    <script type="text/javascript">
        function showAlert() {
            alert('Hello from JavaScript!');
        }
    </script>
</head>
<body>
    <h1>JavaScript Interaction Example</h1>
    <button onclick="showAlert()">Click Me</button>
</body>
</html>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.WebViewPage">

    <StackLayout>
        <!-- WebView to display HTML content -->
        <WebView x:Name="MyWebView"
                 HeightRequest="600"
                 WidthRequest="400" />
        <!-- Button to interact with JavaScript in the WebView -->
        <Button Text="Call JavaScript"
                Clicked="OnCallJavaScriptClicked" />
    </StackLayout>
</ContentPage>

namespace MauiAppExample
{
    public partial class WebViewPage : ContentPage
    {
        public WebViewPage()
        {
            InitializeComponent();

            // Load HTML file from app resources
            var localHtmlSource = new HtmlWebViewSource
            {
                BaseUrl = "file:///android_asset/",
                Html = LoadHtmlFile("Resources/Raw/index.html")
            };

            MyWebView.Source = localHtmlSource;
        }

        private string LoadHtmlFile(string fileName)
        {
            var assembly = typeof(WebViewPage).Assembly;
            using var stream = assembly.GetManifestResourceStream(fileName);
            using var reader = new StreamReader(stream);
            return reader.ReadToEnd();
        }

        private async void OnCallJavaScriptClicked(object sender, EventArgs e)
        {
            // Call JavaScript function in the WebView
            await MyWebView.EvaluateJavaScriptAsync("showAlert()");
        }
    }
}

maui

, ,