Guias

Introdução

Instalação

Guias

Resolução de problemas

Migração

BrowserView

O documento descreve como incorporar um componente visual que apresenta o conteúdo de páginas Web em aplicações WinForms, WPF e Avalonia UI.

Incorporação

O DotNetBrowser pode ser utilizado em aplicações .NET criadas com as seguintes estruturas .NET GUI:

WinForms
WPF
Avalonia UI

O componente IBrowser não é um componente visual que permita visualizar uma página Web. Para apresentar o conteúdo de uma página Web carregada no IBrowser, utilize um dos seguintes controles, dependendo da estrutura GUI utilizada:

DotNetBrowser.WinForms.BrowserView
DotNetBrowser.Wpf.BrowserView
DotNetBrowser.AvaloniaUi.BrowserView

Ambos os controles implementam a interface IBrowserView. A ligação de uma vista a uma instância específica do IBrowser é estabelecida, quando necessário, através da chamada do método de extensão InitializeFrom(IBrowser) .

Não é possível inicializar várias views a partir de um único naegador - se existir uma view de navegador ligada a esta instância de navegador, essa view será desinicializada por uma chamada subsequente a InitializeFrom.

O método de extensão InitializeFrom(IBrowser) deve ser chamado a partir da thread UI.

As implementações do IBrowserView não descartam as instâncias IBrowser ou IEngine conectadas quando o aplicativo é fechado. Como resultado, o navegador e o engine aparecerão vivos mesmo depois de todas as janelas da aplicação estarem fechadas e impedirão que a aplicação termine. Para lidar com este caso, é necessário descartar as instâncias IBrowser ou IEngine durante o encerramento da aplicação.

WinForms

Para exibir o conteúdo de uma página da Web em um aplicativo .NET WinForms, crie uma instância do DotNetBrowser.WinForms.BrowserView:

      using DotNetBrowser.WinForms;
// ...
BrowserView browserView = new BrowserView();
browserView.InitializeFrom(browser);

    

      Imports DotNetBrowser.WinForms
' ...
Dim browserView As New BrowserView()
browserView.InitializeFrom(browser)

    

E incorpore-o em um Form:

      form.Controls.Add(view);

    

      form.Controls.Add(view)

    

Eis o exemplo completo:

      using System.Windows.Forms;
using DotNetBrowser.Browser;
using DotNetBrowser.Engine;
using DotNetBrowser.WinForms;

namespace Embedding.WinForms
{
    /// <summary>
    /// Este exemplo demonstra como embutir o DotNetBrowser
    /// numa aplicação Windows Forms.
    /// </summary>
    public partial class Form1 : Form
    {
        private const string Url = "https://html5test.teamdev.com/";
        private readonly IBrowser browser;
        private readonly IEngine engine;

        public Form1()
        {
            // Criar o controle BrowserView do Windows Forms.
            BrowserView browserView = new BrowserView
            {
                Dock = DockStyle.Fill
            };

            // Criar e inicializar a instância do IEngine.
            EngineOptions engineOptions = new EngineOptions.Builder
            {
                RenderingMode = RenderingMode.HardwareAccelerated
            }.Build();
            engine = EngineFactory.Create(engineOptions);

            // Criar a instância do IBrowser.
            browser = engine.CreateBrowser();

            InitializeComponent();

            // Adicionar o controle BrowserView ao formulário.
            Controls.Add(browserView);
            FormClosed += Form1_FormClosed;

            // Inicializa o controle BrowserView do Windows Forms.
            browserView.InitializeFrom(browser);
            browser.Navigation.LoadUrl(Url);
        }

        private void Form1_FormClosed(object sender, FormClosedEventArgs e)
        {
            browser?.Dispose();
            engine?.Dispose();
        }
    }
}

    

      Imports System.Windows.Forms
Imports DotNetBrowser.Browser
Imports DotNetBrowser.Engine
Imports DotNetBrowser.WinForms

Namespace Embedding.WinForms
    ''' <summary>
    ''' Este exemplo demonstra como incorporar o DotNetBrowser
    ''' em um aplicativo Windows Forms.
    ''' </summary>
    Partial Public Class Form1
        Inherits Form

        Private Const Url As String = "https://html5test.teamdev.com/"
        Private ReadOnly browser As IBrowser
        Private ReadOnly engine As IEngine

        Public Sub New()
            ' Cria o controle BrowserView do Windows Forms.
            Dim browserView As New BrowserView With {.Dock = DockStyle.Fill}

            ' Cria e inicializa a instância do IEngine.
            Dim engineOptions As EngineOptions = New EngineOptions.Builder With {
                .RenderingMode = RenderingMode.HardwareAccelerated
            }.Build()
            engine = EngineFactory.Create(engineOptions)

            ' Cria a instância do IBrowser.
            browser = engine.CreateBrowser()

            InitializeComponent()

            ' Adiciona o controle BrowserView ao formulário.
            Controls.Add(browserView)
            AddHandler FormClosed, AddressOf Form1_FormClosed

            ' Inicializa o controle BrowserView do Windows Forms.
            browserView.InitializeFrom(browser)
            browser.Navigation.LoadUrl(Url)
        End Sub

        Private Sub Form1_FormClosed(sender As Object, e As FormClosedEventArgs)
            browser?.Dispose()
            engine?.Dispose()
        End Sub
    End Class
End Namespace

    

O resultado deste exemplo tem o seguinte aspecto: WinForms View

O projeto completo está disponível no nosso repositório: C#, VB.

WPF

Para apresentar o conteúdo de uma página Web numa aplicação WPF, crie uma instância do DotNetBrowser.Wpf.BrowserView:

      using DotNetBrowser.Wpf;
// ...
BrowserView browserView = new BrowserView();
browserView.InitializeFrom(browser);

    

      Imports DotNetBrowser.Wpf
' ...
Dim browserView As New BrowserView()
browserView.InitializeFrom(browser)

    

Eis o exemplo completo:

MainWindow.xaml

    <Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:WPF="clr-namespace:DotNetBrowser.Wpf;assembly=DotNetBrowser.Wpf"
    x:Class="Embedding.Wpf.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="480" Width="800" Closed="Window_Closed">
    <Grid>
        <WPF:BrowserView Name="browserView" />
    </Grid>
</Window>

  

MainWindow.xaml.cs

MainWindow.xaml.vb

      using System;
using System.Windows;
using DotNetBrowser.Browser;
using DotNetBrowser.Engine;

namespace Embedding.Wpf
{
    /// <summary>
    /// Este exemplo demonstra como incorporar o DotNetBrowser
    /// numa aplicação WPF.
    /// </summary>
    public partial class MainWindow : Window
    {
        private const string Url = "https://html5test.teamdev.com/";
        private readonly IBrowser browser;
        private readonly IEngine engine;

        public MainWindow()
        {
            // Cria e inicializa a instância IEngine.
            EngineOptions engineOptions = new EngineOptions.Builder
            {
                RenderingMode = RenderingMode.HardwareAccelerated
            }.Build();
            engine = EngineFactory.Create(engineOptions);

            // Criar a instância do IBrowser.
            browser = engine.CreateBrowser();

            InitializeComponent();

            // Inicializar o controle BrowserView do WPF.
            browserView.InitializeFrom(browser);
            browser.Navigation.LoadUrl(Url);
        }

        private void Window_Closed(object sender, EventArgs e)
        {
            browser?.Dispose();
            engine?.Dispose();
        }
    }
}

    

      Imports System.Windows
Imports DotNetBrowser.Browser
Imports DotNetBrowser.Engine

Namespace Embedding.Wpf
    ''' <summary>
    ''' Este exemplo demonstra como incorporar o DotNetBrowser
    ''' em um aplicativo WPF.
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window

        Private Const Url As String = "https://html5test.teamdev.com/"
        Private ReadOnly browser As IBrowser
        Private ReadOnly engine As IEngine

        Public Sub New()
            ' Cria e inicializa a instância do IEngine.
            Dim engineOptions As EngineOptions = New EngineOptions.Builder With {
                .RenderingMode = RenderingMode.HardwareAccelerated
            }.Build()
            engine = EngineFactory.Create(engineOptions)

            ' Cria a instância do IBrowser.
            browser = engine.CreateBrowser()

            InitializeComponent()

            ' Inicializa o controle BrowserView do WPF.
            browserView.InitializeFrom(browser)
            browser.Navigation.LoadUrl(Url)
        End Sub

        Private Sub Window_Closed(sender As Object, e As EventArgs)
            browser?.Dispose()
            engine?.Dispose()
        End Sub
    End Class
End Namespace

    

A saída deste exemplo tem o seguinte aspecto: WPF View

O projeto completo está disponível no nosso repositório: C#, VB.

ElementHost

Recomendamos a utilização do WinForms BrowserView em aplicações WinForms, bem como do WPF BrowserView em aplicações WPF.

Por vezes, é necessário incorporar o WPF BrowserView numa aplicação WinForms. Por exemplo, quando se desenvolve um controle de navegador Web complexo utilizando o WPF UI Toolkit, e é necessário apresentar este controle WPF numa aplicação WinForms.

Desde a versão 2.0, é possível incorporar o WPF BrowserView numa janela WinForms utilizando ElementHost. É suportado por todos os modos de renderização.

      using System;
using System.Windows.Forms;
using System.Windows.Forms.Integration;
using DotNetBrowser.Browser;
using DotNetBrowser.Engine;
using DotNetBrowser.Wpf;

namespace ElementHostEmbedding.WinForms
{
    public partial class Form1 : Form
    {
        private const string Url = "https://html5test.teamdev.com";
        private readonly IBrowser browser;
        private readonly IEngine engine;
        private readonly ElementHost host;

        public Form1()
        {
            // Cria e inicializa a instância IEngine.
            EngineOptions engineOptions = new EngineOptions.Builder
            {
                RenderingMode = RenderingMode.OffScreen,
                // Definir a chave de licença programaticamente.
                LicenseKey = "sua_chave_de_licença_aqui"
            }.Build();
            engine = EngineFactory.Create(engineOptions);

            // Cria a instância do IBrowser.
            browser = engine.CreateBrowser();
            // Cria o controle BrowserView do WPF.
            BrowserView browserView = new BrowserView();
            
            InitializeComponent();
            FormClosed += Form1_FormClosed;

            // Cria e inicializa o controle ElementHost.
            host = new ElementHost
            {
                Dock = DockStyle.Fill,
                Child = browserView
            };
            Controls.Add(host);

            // Inicializa o controle BrowserView do WPF.
            browserView.InitializeFrom(browser);
            browser.Navigation.LoadUrl(Url);
        }

        private void Form1_FormClosed(object sender, EventArgs e)
        {
            browser?.Dispose();
            engine?.Dispose();
        }
    }
}

    

      Imports System.Windows.Forms.Integration
Imports DotNetBrowser.Browser
Imports DotNetBrowser.Engine
Imports DotNetBrowser.Wpf

Namespace ElementHostEmbedding.WinForms
    Partial Public Class Form1
        Inherits Form

        Private Const Url As String = "https://html5test.teamdev.com"
        Private ReadOnly browser As IBrowser
        Private ReadOnly engine As IEngine
        Private ReadOnly host As ElementHost

        Public Sub New()
            ' Cria e inicializa a instância IEngine.
            Dim engineOptions As EngineOptions = New EngineOptions.Builder With {
                .RenderingMode = RenderingMode.OffScreen,
                .LicenseKey = "sua_chave_de_licença_aqui"
            }.Build()
            engine = EngineFactory.Create(engineOptions)

            ' Cria a instância do IBrowser.
            browser = engine.CreateBrowser()
            ' Cria o controle BrowserView do WPF.
            Dim browserView As New BrowserView()

            InitializeComponent()
            AddHandler FormClosed, AddressOf Form1_FormClosed

            ' Cria e inicializa o controle ElementHost.
            host = New ElementHost With {
                .Dock = DockStyle.Fill,
                .Child = browserView
            }
            Controls.Add(host)

            ' Inicializa o controle BrowserView do WPF.
            browserView.InitializeFrom(browser)
            browser.Navigation.LoadUrl(Url)
        End Sub

        Private Sub Form1_FormClosed(sender As Object, e As EventArgs)
            browser?.Dispose()
            engine?.Dispose()
        End Sub
    End Class
End Namespace

    

O exemplo completo está disponível no nosso repositório: C#, VB.

Avalonia UI

Para apresentar o conteúdo de uma página Web numa aplicação WPF, crie uma instância do DotNetBrowser.AvaloniaUi.BrowserView:

      using DotNetBrowser. WinForms;
// ...
BrowserView browserView = new BrowserView();
browserView. InitializeFrom(browser);

    

      vb Imports DotNetBrowser. WinForms
' ...
Dim browserView As New BrowserView()
browserView.InitializeFrom(browser)

    

Incorporação

MainWindow.axaml

    <Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:app="clr-namespace:DotNetBrowser.AvaloniaUi;assembly=DotNetBrowser.AvaloniaUi"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="Embedding.AvaloniaUi.MainWindow"
        Title="Embedding.AvaloniaUi" Closed="Window_Closed">
    <app:BrowserView x:Name="BrowserView"/>
</Window>

  

MainWindow.axaml.cs

    using System;
using Avalonia.Controls;
using DotNetBrowser.Browser;
using DotNetBrowser.Engine;

namespace Embedding.AvaloniaUi
{

    /// <summary>
    ///     Este exemplo demonstra como incorporar DotNetBrowser
    ///     na aplicação Avalonia.
    /// </summary>
    public partial class MainWindow : Window
    {
        private const string Url = "https://dotnetbrowser-support.teamdev.com/";
        private readonly IBrowser browser;
        private readonly IEngine engine;

        public MainWindow()
        {
            // Cria e inicializa instância IEngine.
            EngineOptions engineOptions = new EngineOptions.Builder
            {
                //LicenseKey = "your_license_key"
            }.Build();
            engine = EngineFactory.Create(engineOptions);

            // Cria a instância IBrowser.
            browser = engine.CreateBrowser();

            InitializeComponent();

            // Inicializa o controle Avalonia UI BrowserView.
            BrowserView.InitializeFrom(browser);
            browser.Navigation.LoadUrl(Url);
        }

        private void Window_Closed(object? sender, EventArgs e)
        {
            browser?.Dispose();
            engine?.Dispose();
        }
    }
}

  

A saída do exemplo tem a seguinte aparência: Avalonia UI View

O projeto completo está disponível no nosso repositório: C#, VB.

Renderização

O DotNetBrowser suporta vários modos de renderização. Nesta seção, descrevemos cada um dos modos com o respectivo desempenho e limitações, e fornecemos recomendações sobre a escolha do modo correto, dependendo do tipo de aplicação .NET.

Acelerado por hardware

A biblioteca renderiza o conteúdo de uma página Web utilizando a GPU no processo da GPU do Chromium e apresenta-o diretamente numa superfície. Neste modo, o BrowserView cria e incorpora uma janela pesada nativa (superfície) na qual a biblioteca processa os píxeis produzidos.

Fora da tela

A biblioteca processa o conteúdo de uma página Web utilizando a GPU no processo da GPU do Chromium e copia os pixeis para uma memória intermédia fora da tela atribuída na memória do processo .NET. Neste modo, o BrowserView cria e incorpora um componente leve que lê os pixeis da memória intermédia fora da tela e apresenta-os utilizando as capacidades da estrutura da IU.

Limitações

Problema de espaço aéreo do WPF

Não se recomenda a apresentação de outros componentes WPF sobre o BrowserView quando o modo de renderização HardwareAccelerated está ativado, uma vez que o BrowserView apresenta uma janela Win32 nativa utilizando HwndHost. Consequentemente, pode muitas vezes causar problemas bem conhecidos no espaço aéreo.

Janelas em camadas WPF

A configuração de uma janela WPF Window com o estilo AllowsTransparency adiciona o sinalizador de estilo de janela WS_EX_LAYERED à janela WPF no Windows. Este sinalizador é utilizado para criar uma janela em camadas. A janela em camadas é uma janela que desenha o seu conteúdo fora da tela. Se incorporarmos uma janela nativa numa janela em camadas quando o modo de renderização HardwareAccelerated estiver ativado, o seu conteúdo não é pintado devido ao conflito de tipos de janela.

Mouse, teclado, toque, arrastar e soltar

No modo de renderização OffScreen , os eventos de mouse, teclado e toque são processados no lado .NET e encaminhados para o engine Chromium.

Atualmente, o WPF suporta totalmente o toque e os gestos. No WinForms, esta funcionalidade está limitada ao toque e à pressão prolongada, porque o suporte de toque no próprio WinForms é limitado.

A funcionalidade de arrastar e soltar (DnD) não é suportada para WPF e WinForms.

Go Top