Compartir vía

Hospedaje visual en ventanas de WebView2

  • Artículo

Hay tres opciones para hospedar el control WebView2 de Microsoft Edge en la aplicación:

  • Modo de hospedaje con ventana.
  • Modo de hospedaje ventana a objeto visual.
  • Modo de hospedaje visual.

No es necesario leer este artículo si usa el hospedaje en ventana en la mayoría de los escenarios. El hospedaje con ventanas es un buen punto de partida para la mayoría de las aplicaciones. Lea este artículo:

  • Si usa el hospedaje con ventana en escenarios poco comunes y experimenta problemas persistentes con ppp y escalado. En este caso, considere la posibilidad de hospedar ventana a objeto visual.
  • Si desea proporcionar una experiencia de usuario (UX) más personalizada. En este caso, considere la posibilidad de hospedar visualmente.

Los diferentes enfoques para hospedar el control WebView2 en la aplicación son similares en funcionalidad, pero se adaptan a diferentes necesidades en función de los requisitos de la aplicación, como se indica a continuación:

Enfoque Descripción Optimizado para
Hospedaje en ventana El control WebView2 toma la entrada del sistema operativo (SO). El sistema operativo envía la entrada a WebView2. Mostrar contenido web de forma rápida y sencilla, sin tener que incluir características para entradas, salidas y accesibilidad.
Hospedaje de ventana a objeto visual Combinación de hospedaje con ventanas y objetos visuales. Similar al hospedaje con ventana, excepto que el contenido de WebView2 se genera en un objeto visual hospedado en una ventana, en lugar de tener la salida de contenido en la ventana directamente. Una experiencia de desarrollador casi idéntica a la del hospedaje con ventana, pero con un mejor control de PPP/escalado y la advertencia de que la experiencia de escritura a mano de Windows Shell no es compatible.
Hospedaje visual La aplicación host toma la entrada espacial (como el mouse o la entrada táctil) del usuario. La aplicación envía esta entrada al control WebView2. Control más pormenorizado sobre la composición del control. La aplicación debe realizar un control específico de las API de representación y administración de ventanas.

Estos enfoques tienen diferentes requisitos, restricciones y ventajas.

  • El hospedaje con ventanas es más sencillo de implementar que el hospedaje visual.
  • El hospedaje visual requiere todas las llamadas API que requiere el hospedaje en ventana y tiene requisitos adicionales para que se represente correctamente.

Las listas de API admitidas están vinculadas a en las secciones siguientes:

Hospedaje en ventana: para mostrar contenido de forma rápida y sencilla

El hospedaje en ventana significa que en la aplicación, el contenido de WebView2 se hospeda directamente en una ventana; es decir, un HWND. El HWND de WebView2 hereda muchas propiedades predeterminadas del sistema operativo (SO). El control WebView2 toma la entrada del sistema operativo y el sistema operativo envía la entrada al control WebView2. Puede tener varios HWND en la aplicación que se usarán como componente WebView2 para acceder al contenido web.

La ventaja de esto es que algunos de los comandos input/output se controlan por usted por el sistema operativo o por el marco de trabajo. Sin embargo, tendrá que controlar algunos aspectos de la administración de ventanas.

Para obtener información general sobre la administración y HWND la funcionalidad de Windows, consulte Acerca de Windows.

Ventajas

  • El hospedaje en ventana permite una solución que muestra rápidamente contenido web sin tener que implementar funcionalidad para entradas, salidas y accesibilidad.

  • Las ventanas secundarias y de propiedad (como menús y menús contextuales) se escalan automáticamente para que coincidan con el escalado primario HWND de la aplicación.

  • El hospedaje con ventanas controla cómo el control WebView2 administra el foco y la tabulación dentro o fuera de sí mismo al presionar Tab llega al elemento final.

  • No es necesario administrar los distintos controles de representación basados en composición (como entradas, salidas y controles de accesibilidad) si no lo desea.

Desventajas

El modo de hospedaje en ventana puede encontrarse con problemas de PPP en algunos escenarios, como al compartir una carpeta de datos de usuario (y, por lo tanto, para compartir un proceso de explorador) en diferentes aplicaciones con reconocimiento de PPP diferente.

API para el hospedaje en ventana

Para obtener una lista de las API que se pueden usar al configurar WebView2 para el hospedaje en ventana (o para el hospedaje de ventana a visual), vea Rendering WebView2 in non-framework apps in Overview of WebView2 features and APIs (Representación de WebView2 en aplicaciones que no son de marco) en Información general sobre características y API de WebView2.

Hospedaje de ventana a objeto visual: para una experiencia similar a la del hospedaje con ventana, con ventajas y desventajas agregadas

El hospedaje de ventana a objeto visual significa que el contenido de WebView2 se genera en un objeto visual hospedado en un HWND, en lugar de generar contenido en una ventana directamente o directamente en un objeto visual. Al hospedar contenido en un HWND, el hospedaje de ventana a objeto visual es fácil de usar, de la misma manera que el hospedaje con ventana. Sin embargo, al mostrar contenido mediante un objeto visual, el hospedaje de ventana a objeto visual evita algunos problemas de entrada y PPP que pueden producirse al usar el hospedaje con ventana.

El hospedaje de ventana a visual no requiere que use las API de hospedaje visual de WebView2.

Para habilitar el hospedaje de Ventana a Visual, la variable COREWEBVIEW2_FORCED_HOSTING_MODE de entorno debe establecerse en el valor COREWEBVIEW2_HOSTING_MODE_WINDOW_TO_VISUAL antes de inicializar WebView2.

En hospedaje de ventana a objeto visual y hospedaje visual, un objeto Visual es una unidad gráfica básica que se puede usar para crear experiencias gráficas en Windows. Las API de gráficos de Windows que exponen esta funcionalidad y son relevantes para WebView2 son DirectComposition y Windows.UI.Composition. El objeto "Visual" de "Hospedaje visual" puede ser cualquiera de IDCompositionVisual, IDCompositionTargeto Windows.UI.Composition.Visual, que son objetos visuales que se exponen a través de las DirectComposition API y Windows.UI.Composition . (El hospedaje de ventana a visual usa IDCompositionVisual específicamente). Ver:

Ventajas

  • Las distintas aplicaciones que comparten una carpeta de datos de usuario de WebView2 pueden tener un reconocimiento de PPP diferente.

  • Las distintas aplicaciones que comparten una carpeta de datos de usuario de WebView2 pueden tener distintos niveles de integridad.

  • Las distintas aplicaciones que comparten una carpeta de datos de usuario de WebView2 no provocarán que se cuelguen entre sí debido a las colas de entrada de ventana adjuntas.

  • Al hospedar un WebView2 en un complemento de VSTO, cambiar la escala del monitor no provocará que la aplicación se cuelgue. Consulte VsTO Add-ins in Office solutions development overview (VSTO).

Desventajas

Al habilitar el modo de hospedaje ventana a visual, se elimina la compatibilidad con la escritura a mano de Windows Shell en WebView2.

Vea también:

API para hospedaje de ventana a objeto visual

Para obtener una lista de las API que se pueden usar al configurar el hospedaje de la ventana WebView2 en el hospedaje visual (o para el hospedaje con ventanas), vea Rendering WebView2 in non-framework apps (Representación de WebView2 en aplicaciones que no son de marco ) en Información general sobre las características y las API de WebView2.

Hospedaje visual: para un control más pormenorizado sobre el diseño

Al usar el hospedaje visual, la aplicación host recibe la entrada espacial (como la entrada táctil o del mouse) del usuario y reenvía esta entrada al control WebView2. El hospedaje visual requiere que la aplicación realice la misma administración de ventanas que el hospedaje con ventanas, pero tiene requisitos de administración de ventanas adicionales relacionados con:

  • Escalado del contenido.
  • Enrutamiento de entradas espaciales (como mouse, touch o lápiz).

Requisitos para escalar el contenido

Por representación basada en composición, un control WebView2 forma parte de un árbol visual, por lo que, de forma predeterminada, se representa a una escala que se basa en las escalas de todos sus objetos visuales antecesores. Por ejemplo, si un objeto visual antecesor de WebView2 se escala (amplía) 2 veces, el contenido de WebView2 también se representa a escala 2 veces. Si el objeto visual primario de WebView2 se escala 2 veces y el elemento primario de ese objeto visual también se escala 2 veces, webView2 se escala 4 veces. Pero como WebView2 no está escalando su propio contenido, son borrosos.

Para resolver esto, la aplicación puede deshacer el escalado visual predeterminado de WebView2 y, en su lugar, usar las API de escalado de rasterización para aplicar el escalado visual previsto. Esto da como resultado la representación del contenido de WebView2 a la escala correcta. Consulte Escala de rasterización en Información general sobre las características y las API de WebView2.

Requisitos para enrutar entradas espaciales (mouse, touch o lápiz)

Si la aplicación WebView2 usa el hospedaje visual, no se envían entradas espaciales (como mouse, toque o lápiz) al control WebView2, a menos que la aplicación administre dicha entrada. La entrada se envía a la aplicación HWNDy la aplicación es responsable de reenviar esta entrada espacial a WebView2, si la posición de la entrada está sobre WebView2.

La aplicación también es responsable de cualquier transformación necesaria de las posiciones de entrada en el espacio de coordenadas de WebView2.

Vea también:

Ventajas y desventajas

El hospedaje visual permite (y requiere) un control más pormenorizado del diseño. Al usar este enfoque, la aplicación necesita un control específico de la administración de ventanas y las API de representación.

Por ejemplo, si una acción de usuario hace que el árbol visual de WebView2 se escale, la aplicación debe ajustar la escala de WebView2 para que se represente correctamente con respecto a sus objetos visuales primarios.

API para hospedaje visual

Para obtener una lista de las API que se pueden usar al configurar WebView2 en un entorno de hospedaje visual, vea Rendering WebView2 using Composition in Overview of WebView2 features and APIs (Representación de WebView2 mediante Composition en Información general sobre las características y las API de WebView2).

Compatibilidad y restricciones

Entre las principales limitaciones de compatibilidad se incluyen el sistema operativo y la representación en aplicaciones de marco y no marcos.

Sistemas operativos

Todos los modos de hospedaje se admiten siempre que se admita WebView2; es decir, Windows 10 y versiones posteriores, y ciertas versiones de Windows Server. Ya no se admiten Windows 7, 8 y 8.1; Windows 7 y Windows 8 solo admiten el hospedaje en ventana, no el hospedaje visual.

Vea también:

Restricciones del marco

CreateCoreWebView2CompositionControllerno admite objetos visuales de WinAppSDK; es decir, objetos visuales en el Microsoft.UI.Composition espacio de nombres, descritos en Mejora de la interfaz de usuario con la capa visual (SDK de Aplicaciones para Windows/WinUI 3).

Vea también

Externo: