Introducción a WebView2 en aplicaciones winUI 2 (UWP)

En este tutorial:

• Configure las herramientas de desarrollo para crear aplicaciones para UWP que usen WebView2 para mostrar contenido web.
• Crea una aplicación inicial de WinUI 2 (UWP).
• Instale el paquete Microsoft.UI.Xaml (WinUI 2) para el proyecto.
• Agregue un control WebView2 que muestre el contenido de la página web.
• Obtenga información sobre los conceptos de WebView2 en el camino.

Use la plantilla de proyecto Aplicación en blanco de C# (Windows universal) y, a continuación, instale el paquete Microsoft.UI.Xaml (WinUI 2) para este proyecto. Al instalar ese paquete, se instala el paquete Microsoft.Web.WebView2 (el SDK de WebView2) como una dependencia.

El paquete Microsoft.UI.Xaml (WinUI 2) forma parte de la biblioteca de interfaz de usuario de Windows. Este paquete proporciona características de interfaz de usuario de Windows, entre las que se incluyen:

• Controles XAML para UWP.
• Estilos de control densos.
• Estilos y materiales fluidos.

Plataformas

Este artículo se aplica a Windows y Xbox.

WinUI 2 solo admite UWP. Estos controles son compatibles con versiones anteriores.

Vea también:

• Ejemplos de aplicaciones multimedia para Xbox

Proyecto completado

Una versión completa de este proyecto de Introducción (solución) se encuentra en el repositorio WebView2Samples. Puede usar la solución completada (desde el repositorio o siguiendo los pasos siguientes) como línea base para agregar más código WebView2 y otras características.

Hay disponible una versión completa de este proyecto de tutorial en el repositorio WebView2Samples :

• Nombre de ejemplo: WinUI2_Sample
• Directorio del repositorio: WinUI2_GettingStarted
• Archivo de solución: MyUWPGetStartApp.sln

Siga las secciones principales del paso en secuencia, a continuación.

Acerca de WinUI y WebView2

En las aplicaciones de WinUI 2 (UWP), WebView2 se expone como un control XAML. Después de insertar el control XAML en la aplicación como un control con nombre, puedes hacer referencia a ese control XAML en archivos de C#.

En WinUI solo se expone un subconjunto de interfaces o funciones de WebView2:

• El WebView2 objeto XAML expone la CoreWebView2 interfaz, junto con la funcionalidad más importante.

• Interfaces como CoreWebView2Controller están ocultas, porque WinUI se encarga del entorno y la creación de ventanas en segundo plano.

Consulta también la limitación de XAML a continuación.

Paso 1: Instalación de Visual Studio

En este artículo se muestran los pasos y las capturas de pantalla de Visual Studio 2022 Community Edition. Se requiere Microsoft Visual Studio 2019, versión 16.9 o posterior. No se admite Visual Studio 2017.

1. Si aún no está instalada una versión adecuada de Microsoft Visual Studio, en una nueva ventana o pestaña, vea Instalar Visual Studio en Configurar el entorno de desarrollo para WebView2. Siga los pasos de esa página para realizar una instalación predeterminada básica de Visual Studio, como Visual Studio 2022 Community Edition.

   A continuación, vuelva a esta página y continúe a continuación.

2. Si Visual Studio no muestra números de línea en el editor de código, es posible que desee activar los números de línea. Para ello, seleccioneOpciones de>herramientas> Editor >de textoTodos los números de línea de idiomas>. Después, haga clic en Aceptar.

Paso 2: Instalación de cargas de trabajo para herramientas de desarrollo de escritorio de .NET, escritorio de C++ y UWP

1. Abra Microsoft Visual Studio. Aparece la ventana de opción de apertura:

   

2. En la parte inferior derecha, haga clic en Continuar sin código. Visual Studio se abre, vacío:

   

3. Seleccione Herramientas>Obtener herramientas y características. Se abre la ventana Instalador de Visual Studio y, a continuación, se abre la ventana Modificar - Visual Studio sobre ella:

   

Si la ventana Modificar Visual Studio no está abierta, en la ventana Instalador de Visual Studio, haga clic en el botón Modificar.

1. En la pestaña Cargas de trabajo , desplácese hasta y haga clic en las tarjetas siguientes para seleccionarlas; Asegúrese de que hay una marca de verificación en cada una de estas tarjetas:

   • Desarrollo de escritorio de .NET
   • Desarrollo de escritorio con C++
   • desarrollo de Plataforma universal de Windows

2. A la derecha, en la sección Detalles de instalación, expanda Plataforma universal de Windows desarrollo y, a continuación, seleccione C++ (v143) Plataforma universal de Windows herramientas:

   

   Si todos estos componentes ya se han instalado, haga clic en el botón Cerrar, cierre la ventana Instalador de Visual Studio y vaya a la siguiente sección principal de los pasos siguientes.

3. Haga clic en el botón Modificar .

   Aparece una ventana Control de cuentas de usuario que le pregunta "¿Desea permitir que esta aplicación realice cambios en el dispositivo? Instalador de Visual Studio. Publicador comprobado: Microsoft Corporation. Origen del archivo: disco duro en este equipo. Mostrar más detalles (botón)".

4. Haga clic en el botón Sí .

5. Aparece un cuadro de diálogo, "Antes de empezar, cierre Visual Studio":

   

6. Haga clic en el botón Continuar .

   Visual Studio descarga, comprueba e instala los paquetes seleccionados:

   

   Esta captura de pantalla muestra Visual Studio Professional 2022, aunque este artículo se actualizó realmente con Visual Studio Community 2022.

   La instalación puede tardar varios minutos. Aparece Visual Studio, con un Explorador de soluciones vacío.

7. Presione Alt+Pestaña para cambiar a la ventana Instalador de Visual Studio y, a continuación, cierre la ventana de Instalador de Visual Studio.

Paso 3: Creación de una aplicación para UWP

1. Si Visual Studio está abierto, seleccione Archivo>nuevo>proyecto. Se abre el cuadro de diálogo Crear un nuevo proyecto .

   O bien, si Visual Studio está cerrado, ábralo y, a continuación, en la pantalla de inicio de Visual Studio, haga clic en la tarjeta Crear un nuevo proyecto :

   

2. En el cuadro de texto Buscar plantillas en la parte superior, escriba Aplicación en blanco de C# (Windows universal) y, a continuación, seleccione la tarjeta Aplicación en blanco de C# (Windows universal):

   

3. Haga clic en el botón Siguiente .

   Aparece el cuadro de diálogo Configurar el nuevo proyecto para una aplicación en blanco (Windows universal):

   

4. En el cuadro de texto Nombre del proyecto, escriba un nombre de proyecto, como MyUWPGetStartApp.

5. En el cuadro de texto Ubicación , escriba una ruta de acceso, como C:\Users\myusername\Documents\MyWebView2Projects.

6. Haga clic en el botón Crear.

   Aparece el cuadro de diálogo Nuevo proyecto de Windows :

   

7. Acepte los valores predeterminados y haga clic en el botón Aceptar .

8. Si aparece la sección de ventana Modo de desarrollador , en esa sección, haga clic en Activado. Si aún no ha establecido la máquina en modo de desarrollador, se abre el cuadro de diálogo Usar características de desarrollador para confirmar la activación del modo de desarrollador.

   • Haga clic en Sí para activar el modo de desarrollador de la máquina y, a continuación, cierre la ventana Configuración .

   Visual Studio muestra la solución y el proyecto recién creados:

   

Paso 4: Compilación y ejecución del proyecto vacío

Antes de agregar código WebView2, confirme que el proyecto funciona y vea el aspecto de la aplicación vacía, como se indica a continuación:

1. Compile y ejecute el proyecto vacío. Para ello, seleccione Depurar>iniciar depuración (F5). Se abre la ventana de la aplicación, muestra temporalmente una cuadrícula y, a continuación, muestra el contenido de la aplicación:

   

   Se trata de una aplicación winUI 2 (UWP) de línea base, sin WebView2 todavía.

2. Cierre la aplicación.

A continuación, configuras este nuevo proyecto de WinUI 2 (UWP) para hospedar el control WebView2 y usar la API WebView2.

Paso 5: Instalar el SDK de WinUI 2 (Microsoft.UI.Xaml)

A continuación, instale el paquete Microsoft.UI.Xaml para este proyecto. Microsoft.UI.Xaml es WinUI 2.

1. En Explorador de soluciones, haga clic con el botón derecho en el proyecto (no en el nodo de solución situado encima) y, a continuación, seleccione Administrar paquetes NuGet.

   El panel Administrador de paquetes NuGet se abre en Visual Studio.

2. En el Administrador de paquetes NuGet, haga clic en la pestaña Examinar .

3. Desactive la casilla Incluir versión preliminar .

4. En el cuadro Buscar , escriba Microsoft.UI.Xaml y, a continuación, seleccione la tarjeta Microsoft.UI.Xaml debajo del cuadro de búsqueda:

   

   Para la versión 2.8.0 o posterior, en la sección Dependencias de la parte inferior, se muestra Microsoft.Web.WebView2 .

   Para HoloLens 2 desarrollo, el paquete Microsoft.Web.WebView2 debe ser la versión 1.0.1722.45 o posterior, que puede ser mayor que la predeterminada. WebView2 en HoloLens 2 está en versión preliminar y está sujeto a cambios antes de la disponibilidad general. WebView2 solo se admite en dispositivos HoloLens 2 que ejecutan la actualización de Windows 11. Para obtener más información, vea Actualizar HoloLens 2.

5. En el panel central, en la lista desplegable Versión , asegúrese de que la opción Más reciente estable está seleccionada, versión 2.8.0 o posterior.

6. Haga clic en el botón Instalar .

   Aparece el cuadro de diálogo Vista previa de cambios :

   

7. Haga clic en el botón Aceptar .

8. Aparece el cuadro de diálogo Aceptación de licencia :

   

9. Haga clic en el botón Acepto . En Visual Studio, se muestra el readme.txt archivo, que indica que ha instalado el paquete WinUI:

   

   El léame enumera algunas líneas de código que son similares a las que agregaremos.

10. SeleccioneGuardar todo en archivo> (Ctrl+Mayús+S).

Ya ha instalado el paquete Microsoft.UI.Xaml, que es WinUI 2, para el proyecto. El SDK de WinUI 2 (Microsoft.UI.Xaml) incluye el SDK de WebView2, por lo que no es necesario instalar por separado el paquete NuGet para el SDK de WebView2.

Paso 6: Creación de instancias del control WebView2 en código XAML

Ahora está listo para agregar código WebView2 al proyecto. En primer lugar, agregue una referencia de espacio de nombres para el control WebView2, como se indica a continuación:

1. En Explorador de soluciones, expanda el proyecto y haga doble clic en MainPage.xaml.

   MainPage.xaml se abre en un diseñador con un editor de código debajo:

   

2. En el editor de código, dentro de la <Page> etiqueta <Pagede inicio del elemento , agregue el atributo siguiente, debajo de los demás xmlns: atributos:

   xmlns:controls="using:Microsoft.UI.Xaml.Controls"
   

   Agregue un control WebView2 a la cuadrícula XAML, como se indica a continuación:

3. En el MainPage.xaml archivo, en el <Grid> elemento (que aún no contiene ningún otro elemento), agregue un control WebView2 agregando el siguiente elemento:

   <controls:WebView2 x:Name="WebView2" Source="https://bing.com"/>
   

4. Presione Ctrl+S para guardar el archivo.

   Encima del MainPage.xaml archivo en el editor de código, se puede mostrar una vista previa del contenido del control WebView2, o bien podría permanecer en blanco (blanco) hasta que compile por primera vez la aplicación:

   

   El subrayado ondulado desaparece después de compilar y ejecutar la aplicación, en el paso siguiente.

Paso 7: Compilación y ejecución del proyecto que contiene el control WebView2

1. Haga clic en Depurar>Iniciar depuración (F5). (Si compila para HoloLens 2, consulte Uso de Visual Studio para implementar y depurar). Se abre la ventana de la aplicación, que muestra brevemente la cuadrícula WebUI WebView2:

   

2. Después de un momento, la ventana de la aplicación muestra el sitio web de Bing en el control WebView2 para WebUI 2:

   

3. En Visual Studio, seleccione Depurar>detener depuración para cerrar la ventana de la aplicación.

Enhorabuena, ha creado su primera aplicación WebView2.

Ahora puede cambiar el contenido del control WebView2 para agregar su propio contenido.

Más información sobre los eventos de navegación

A continuación, obtenga información sobre los eventos de navegación, que son esenciales para las aplicaciones WebView2. La aplicación navega inicialmente a https://bing.com.

• En una nueva ventana o pestaña, lea Eventos de navegación para aplicaciones WebView2 y vuelva a esta página.

Consideraciones especiales para WebView2 en WinUI 2 (UWP)

El control WebView2 WinUI 2 (UWP) está en desarrollo.

Interfaz de usuario de autorrellenar

La interfaz de usuario de autorrellenar aún no está implementada para WebView2 para aplicaciones para UWP.

Vea también:

• Autorrellenar en Información general sobre las características y las API de WebView2.

Imprimir en PDF

Imprimir en PDF requiere que la aplicación tenga acceso a una ubicación que se puede escribir en UWP, como una carpeta local. Para obtener una lista completa de rutas de acceso accesibles para UWP, consulta Permisos de acceso a archivos.

Vea también:

• Impresión en Información general sobre las características y las API de WebView2.

Impresión predeterminada

La impresión predeterminada está deshabilitada para WebView2 para aplicaciones para UWP. Sin embargo, puede capturar e imprimir la ventanilla actual llamando a CapturePreview.

Vea también:

• Captura de imágenes en Información general sobre las características y las API de WebView2.

SmartScreen

WebView2 envía las direcciones URL a las que se navega en la aplicación al servicio SmartScreen para asegurarse de que los clientes permanecen seguros. Si desea deshabilitar esta navegación, puede hacerlo a través de una variable de entorno:

• Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--disable-features=msSmartScreenProtection");

Esta variable de entorno debe establecerse antes de CoreWebView2 la creación, que se produce cuando se establece inicialmente la propiedad WebView2.Source o se llama inicialmente al método WebView2.EnsureCoreWebView2Async .

Descarga de archivos

Hay un par de limitaciones conocidas para el comportamiento actual de descargas para WebView2 en UWP.

Guardar como

Guardar archivos a través de Guardar como funciona y está habilitado para WebView2 para aplicaciones para UWP. Los archivos se guardarán en la carpeta que seleccione el usuario.

¿En qué carpeta se descargan los archivos?

Si el host no cambia el ResultFilePath del archivo descargado, los archivos descargados se descargarán en una subcarpeta con el nombre del paquete de la aplicación en la Downloads carpeta .

Si el host cambia el ResultFilePath del archivo descargado, el archivo solo se descargará si la aplicación tiene acceso a esa ruta de acceso de archivo de forma predeterminada. Si desea usar una ubicación de archivo a la que la aplicación no tenga acceso de forma predeterminada, debe establecer la funcionalidad correspondiente. Consulta Declaraciones de funcionalidad de la aplicación en la documentación de UWP.

Centro de descargas

La apertura de archivos y carpetas desde el Centro de descargas está deshabilitada. Al hacer clic en el icono de archivo o carpeta no se abrirá el archivo o carpeta correspondientes.

Vea también:

• Descargas en Información general sobre las características y las API de WebView2.

Limitación de XAML

La compatibilidad con la isla XAML requiere trabajo adicional y se puede tener en cuenta para futuras versiones.

Establecer DefaultBackgroundColor

En WinUI 2, la DefaultBackgroundColor propiedad no se expone directamente. Para establecer el color de fondo predeterminado, establezca una variable de entorno, como se indica a continuación:

Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "FF000000");

Vea también:

• .NET: propiedad WebView2.DefaultBackgroundColor
• Win32: ICoreWebView2Controller2::D efaultBackgroundColor (propiedad) (get, put)

Establecimiento de la transparencia

En WinUI 2, la transparencia se logra estableciendo el color 00FFFFFFen .

Cursores CSS

En WinUI 2 (UWP), los cursores CSS tienen las siguientes limitaciones.

Direcciones URL de imagen

El cursor CSS no puede ser una dirección URL de imagen, como cursor: url(https://contoso.com/cursor.png), pointer;. Consulte CSS: el cursor cargado desde la dirección URL no funciona.

Cursores CSS predefinidos

En WinUI 2 (UWP), no se admiten algunos de los cursores CSS predefinidos. Puede usar cursores CSS para cambiar el cursor a algunos de los cursores predefinidos, como cursor: wait; o cursor: crosshair;, pero no a otros, como cursor: progress o cursor: none.

Vea también:

• Cursores CSS : en la sección Valores se describen los valores de palabra clave anteriores.

Herramientas para desarrolladores de Microsoft Edge

En WinUI 2, Microsoft Edge DevTools no se puede iniciar dentro de una aplicación WebView2 WinUI 2 (UWP) firmada por la tienda. Sin embargo, puede solucionarlo mediante la depuración remota. Consulta Depuración remota de aplicaciones WebView2 WinUI 2 (UWP).

Limitaciones de api

Las clases siguientes no son accesibles en WinUI 2:

• CoreWebView2EnvironmentOptions
• CoreWebView2ControllerOptions

Consulte también

• Referencia de api de WebView2
• Aplicación de ejemplo de WinUI 2 (UWP): pasos para descargar, actualizar, compilar y ejecutar el ejemplo WinUI 2 WebView2.
• Administrar carpetas de datos de usuario
• Código de ejemplo para WebView2 : una guía para el WebView2Samples repositorio.
• Procedimientos recomendados de desarrollo para aplicaciones WebView2

Github:

• Repositorio WebView2Samples
• Aplicación de ejemplo webView2 para UWP : el ejemplo WebView2 de WinUI 2 (UWP).
• Problemas (repositorio microsoft-ui-xaml ) para escribir errores o solicitudes de características específicas de WinUI.
• A diferencia de algunos de los otros tutoriales, no hay una versión completa de este tutorial Introducción en el repositorio WebView2Samples.
• Paquete NuGet Microsoft.UI.Xaml
• Ejemplos de aplicaciones multimedia para Xbox