Aplicación de ejemplo de WinForms

  • Artículo

En este ejemplo, WebView2WindowsFormsBrowser, se muestra cómo usar el control WebView2 y las API de WebView2 para implementar un explorador web en una aplicación WinForms.

  • Nombre de ejemplo: WebView2WindowsFormsBrowser
  • Directorio del repositorio: WebView2WindowsFormsBrowser
  • Archivo de solución: WebView2WindowsFormsBrowser.sln

Ventana de aplicación WebView2WindowsFormsBrowser

  • El menú Control tiene elementos de menú de alternancia para teclas de aceleración y permitir colocación externa.
  • El menú Ver tiene submenús Zoom y Color de fondo .
  • El botón Eventos abre la ventana EventMonitor .

Paso 1: Instalación de Visual Studio

Se requiere Microsoft Visual Studio. Microsoft Visual Studio Code no se admite para este ejemplo.

  1. Si Visual Studio (versión mínima necesaria) no está instalada, en una ventana o pestaña independiente, vea Instalar Visual Studio en Configurar el entorno de desarrollo para WebView2. Siga los pasos de esa sección y vuelva a esta página y continúe con los pasos siguientes.

Paso 2: Instalación de un canal de versión preliminar de Microsoft Edge

  1. Si aún no está instalado un canal de versión preliminar de Microsoft Edge (Beta, Desarrollo o Canary), en una ventana o pestaña independiente, consulte Instalación de un canal de vista previa de Microsoft Edge en Configuración del entorno de desarrollo para WebView2. Siga los pasos de esa sección y vuelva a esta página y continúe con los pasos siguientes.

  2. Para probar las API experimentales con antelación y garantizar la compatibilidad directa de la aplicación WebView2, consulta Enfoques para hacer que la aplicación use un canal de explorador específico en Probar las próximas API y características. Siga los pasos de esa sección y vuelva a esta página y continúe con los pasos siguientes.

Paso 3: Clonación o descarga del repositorio WebView2Samples

  1. Si aún no lo ha hecho, clone o descargue el repositorio en la WebView2Sample unidad local. En una ventana o pestaña independiente, consulte Descarga del repositorio WebView2Samples en Configuración del entorno de desarrollo para WebView2. Siga los pasos de esa sección y vuelva a esta página y continúe a continuación.

Paso 4: Abrir .sln en Visual Studio

  1. En la unidad local, abra el .sln archivo en Visual Studio, en el directorio :

    • <your-repos-directory>/WebView2Samples/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln

    o bien:

    • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln

Paso 5: Instalación de cargas de trabajo si se le solicita

  1. Si se le solicita, instale las cargas de trabajo de Visual Studio que se soliciten. En una ventana o pestaña independiente, vea Instalar cargas de trabajo de Visual Studio en Configuración del entorno de desarrollo para WebView2. Siga los pasos de esa sección y vuelva a esta página y continúe a continuación.

Paso 6: Compilación y ejecución del proyecto

El proyecto WebView2WindowsFormsBrowser ahora está abierto en Visual Studio, desde los pasos anteriores. En la parte superior de Visual Studio, establezca el destino de compilación, como se indica a continuación:

  1. En la lista desplegable Configuraciones de solución , seleccione Depurar o Liberar.

  2. En la lista desplegable Plataformas de soluciones , seleccione Cualquier CPU.

  3. En Explorador de soluciones, haga clic con el botón derecho en el proyecto WebView2WindowsFormsBrowser y, a continuación, seleccione Compilar.

    De este modo, se compila el archivo SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.vcxprojde proyecto . Esto puede tardar un par de minutos.

    Si recibe mensajes de error sobre la falta del paquete para desarrolladores de .NET Framework 4.6.2, siga estos pasos. De lo contrario, vaya a la siguiente sección principal a continuación.

  4. En Visual Studio, seleccione Depurar>iniciar depuración (F5).

    Se abre la ventana de la aplicación de ejemplo:

    Ventana de la aplicación WebView2WindowsFormsBrowser

  5. Use la aplicación de ejemplo; vea Archivo LÉAME para WebView2WindowsFormsBrowser.

  6. En Visual Studio, seleccione Depurar>detener depuración. Visual Studio cierra la aplicación.

Paso 7: Instalación del paquete para desarrolladores de .NET Framework 4.6.2

Si compila el proyecto WebView2WindowsFormsBrowser y recibe mensajes de error sobre la falta del paquete para desarrolladores de .NET Framework 4.6.2, siga estos pasos. De lo contrario, vaya a la siguiente sección principal a continuación.

  1. Vaya a Descargar .NET Framework, seleccione v4.6.2 y haga clic en el botón Descargar paquete para desarrolladores de .NET Framework 4.6.2 :

    Descarga del paquete para desarrolladores de .NET Framework 4.6.2

  2. En Microsoft Edge, seleccione Configuración y más>descargas>Mostrar en el icono de carpeta :

    Descarga del paquete para desarrolladores de .NET Framework

  3. En la Downloads carpeta , haga doble clic en el archivo, como ndp462-devpack-kb3151934-enu.exe.

    Aparece el cuadro de diálogo contrato de licencia de Microsoft .NET Framework Developer Pack :

    Cuadro de diálogo contrato de licencia de Microsoft .NET Framework Developer Pack

  4. Seleccione la casilla Acepto los términos y condiciones de licencia y, a continuación, haga clic en el botón Instalar .

    Aparece una ventana control de cuentas de usuario que le pregunta "¿Desea permitir que esta aplicación realice cambios en el dispositivo?"

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

    Aparece el cuadro de diálogo Instalación correcta del paquete para desarrolladores de Microsoft .NET Framework:

    Cuadro de diálogo

  6. Haga clic en el botón Cerrar .

Paquete de desarrollador de Microsoft .NET Framework 4.6.2 ya está instalado en el equipo.

Paso 8: Actualización o instalación del SDK de WebView2

  1. SDK de WebView2: actualice o instale el SDK de WebView2 en el nodo del proyecto (no en el nodo de solución) en Explorador de soluciones. En una ventana o pestaña independiente, consulte Instalación o actualización del SDK de WebView2 en Configuración del entorno de desarrollo para WebView2. Siga los pasos de esa sección y vuelva a esta página y continúe a continuación.

    Proyecto WebView2WindowsFormsBrowser en Visual Studio

Paso 9: Compilación y ejecución del proyecto actualizado

  1. Si acaba de instalar .NET Framework 4.6.2 Developer Pack anterior, cierre Visual Studio y vuelva a abrir el archivo de solución en Visual Studio, desde el directorio:

    • <your-repos-directory>/WebView2Samples/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln

    o bien:

    • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.sln

En la parte superior de Visual Studio, establezca el destino de compilación, como se indica a continuación:

  1. En la lista desplegable Configuraciones de solución , seleccione Depurar o Liberar.

  2. En la lista desplegable Plataformas de soluciones , seleccione Cualquier CPU.

  3. En Explorador de soluciones, haga clic con el botón derecho en el proyecto WebView2WindowsFormsBrowser y, a continuación, seleccione Compilar.

    De este modo, se compila el archivo SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.vcxprojde proyecto .

  4. En Visual Studio, seleccione Depurar>iniciar depuración (F5).

    Se abre la ventana de la aplicación de ejemplo:

    Ventana de la aplicación WebView2WindowsFormsBrowser

    • El menú Control tiene elementos de menú de alternancia para teclas de aceleración y permitir colocación externa.
    • El menú Ver tiene submenús Zoom y Color de fondo .
    • El botón Eventos abre la ventana EventMonitor .

  5. En Visual Studio, seleccione Depurar>detener depuración. Visual Studio cierra la aplicación.

Paso 10: Inspeccionar el código

  1. En el editor de código de Visual Studio, inspeccione el código:

    Proyecto WebView2WindowsFormsBrowser en Visual Studio

Vea también