WebView

Класс WebView представляет собой мини-веббраузер, позволяющий просматривать веб-контент в виде веб-страниц из интернета, локальных html-файлов и просто строк с кодом html. Некоторые из свойств WebView, которые позволяют управлять навигацией

• Cookies: представляет тип CookieContainer и позволяет управлять куками.

• CanGoBack: представляет тип bool и указывает, можно ли перейти к предыдущей странице. Данное свойство доступно только для чтения.

• CanGoForward: представляет тип bool и указывает, можно ли перейти к следующей странице. Данное свойство доступно только для чтения.

• Source: представляет тип WebViewSource - адрес текущей html-страницы, которая отображается в WebView. В реальности данное свойство будет представлять один из наследников класса WebViewSource: либо тип UrlWebViewSource (если html-страница загружена из интернета), либо тип HtmlWebViewSource (если загружен локальный html-файл)

Следует учитывать, что если объект WebView помещается в контейнеры HorizontalStackLayout, StackLayout или VerticalStackLayout, то для WebView необходимо установить свойства HeightRequest и WidthRequest. Иначе WebView не будет отображаться.

Просмотр данных из интернета

Для загрузки данных нам надо передать свойству Source элемента WebView определенный интернет-адрес:

namespace HelloApp;

class StartPage : ContentPage
{
    public StartPage()
    {
        WebView webView = new WebView 
        { 
            Source = "https://metanit.com/"
        };
        Content = webView;
    }
}

Стоит отметить, что хотя свойство Source представляет тип WebViewSource, мы можем передать этому свойство обычную строку с адресом. И фреймворк сам преобразует ее в требуемый тип. То есть по сути в примере выше адрес устанавливается следующим образом:

namespace HelloApp;

class StartPage : ContentPage
{
    public StartPage()
    {
        WebView webView = new WebView 
        { 
            Source = new UrlWebViewSource { Url = "https://metanit.com/" },
        };
        Content = webView;
    }
}

Аналог в xaml:

<?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="HelloApp.MainPage">
    <WebView Source="https://metanit.com/" />
</ContentPage>

Примечение для iOS

Начиная с версии iOS 9 система позволяет взаимодействовать только с теми серверами, которые применяют SSL. Для всех остальных серверов, которые не применяют SSL, надо вносить соответствующие значения в файл Info.plist.

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>xamarin.com</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>TLSv1.1</string>
            </dict>
        </dict>
    </dict>

В данном случае дается разрешение для работы с сайтом xamarin.com. Но если нам вообще надо снять ограничение, то мы можем использовать более универсальную, но менее безопасную настройку:

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads </key>
        <true/>
    </dict>

Чтобы внести изменения в файл, надо его открыть как xml-файл в обычном текстовом редакторе.

Загрузка HTML-строк

namespace HelloApp;

class StartPage : ContentPage
{
    public StartPage()
    {
        WebView webView = new WebView();
        var htmlSource = new HtmlWebViewSource();
        htmlSource.Html = @"
                      
Hello METANIT.COM
                      
Hello .NET MAUI!
                      ";
        webView.Source = htmlSource;
        Content = webView;
    }
}

Аналог в XAML:

<?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="HelloApp.MainPage">
    <WebView>
        <WebView.Source>
            <HtmlWebViewSource>
                <HtmlWebViewSource.Html>
                    <![CDATA[
                    <h1>Hello METANIT.COM</h1>
                    <p>Hello .NET MAUI!</p>
                    ]]>
                </HtmlWebViewSource.Html>
            </HtmlWebViewSource>
        </WebView.Source>
    </WebView>
</ContentPage>

Для большей читаемости кода HTML в XAML HTML-код помещается в секцию CDATA.

Загрузка локальных html-файлов

WebView может запускать файлы HTML, CSS и Javascript, которые встроены в приложение. Локальные файлы html, а также все сопутствующие ресурсы - файлы изображений, мультимедиа, скрипты javascript, стили css следует помещать в проекте в папку Resources\Raw. Кроме того, у всех этих файлов параметр Build Action должен быть установлен в MauiAsset.

Например, пусть у нас в папке Resources\Raw есть следующий html-файл index.html:

<!DOCTYPE html>
<html>
<head>
    <title>METANIT.COM</title>
    <meta charset="utf-8" />
    <link href="./styles.css" rel="stylesheet">
</head>
<body>
    <h1>Зимний лес</h1>
    <img src="forest.jpg" />
</body>
</html>

Этот файл использует таблицу стилей из файла styles.css и файл изображения forest.jpg. Также надо учесть, что данный файл имеет кодировку utf-8.

Убедимся, что у всех этих файлов параметр Build Action должен быть установлен в MauiAsset.

Теперь загрузим файл index.html в коде C#:

namespace HelloApp;

class StartPage : ContentPage
{
    public StartPage()
    {
        WebView webView = new WebView();
        webView.Source = "index.html";
        Content = webView;
    }
}

Аналог в XAML

<?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="HelloApp.MainPage">
    <WebView Source="index.html" />
</ContentPage>

Управление навигацией

Класс WebView поддерживает программный переход к страницам, сохраненным в истории переходов. Для этого класс определяет методы GoBack() (переход к предыдущей странице) и GoForward (переход к следующей странице).

WebView webView = new WebView();
// ...........
// если можно перейти назад, переходим назад
if (webView.CanGoBack)
{
    webView.GoBack();
}

// если можно перейти вперед, переходим вперед
if (webView.CanGoForward)
{
    webView.GoForward();
}

Для отслеживания навигации класс WebView определяет два события:

• Navigating: возникает, когда начинается переход на страницу. В качестве параметра принимает аргумент типа WebNavigatingEvent, который определяет свойство Cancel. Если это свойство равно true, то переход на страницу отменен.

• Navigated: возникает, когда переход на страницу завершен. В качестве параметра принимает объект класса WebNavigatedEventArgs. Этот класс определяет свойство Result, которое представляет тип WebNavigationResult и хранит результат перехода в виде одной из констант WebNavigationResult:

  • Success: переход успешно завершился

  • Cancel: переход отменен

  • Timeout: таймаут в процессе перехода

  • Failure: переход завершился неудачно

Пример обработки перехода:

namespace HelloApp;

class StartPage : ContentPage
{
    Label statusLabel = new Label() { Padding=8, FontSize=20};
    public StartPage()
    {
        Grid grid = new Grid();
        grid.RowDefinitions.Add(new RowDefinition { Height = 60 });
        grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Star });

        WebView webView = new WebView();
        webView.Source = "https://metanit.com";
        webView.Navigated += WebView_Navigated; // подключаем обработчик события

        grid.Add(statusLabel, 0, 0);
        grid.Add(webView, 0, 1);
        Content = grid;
    }
    // обрабатываем завершение перехода
    void WebView_Navigated(object sender, WebNavigatedEventArgs e)
    {
        if (e.Result == WebNavigationResult.Success)
            statusLabel.Text = "Запрос завершился успешно";
        else
            statusLabel.Text = "В процессе запроса возникли проблемы";
    }
}