Creación de una aplicación de Windows Forms Blazor
Nota
Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión .NET 8 de este artículo.
Importante
Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.
Para la versión actual, consulte la versión .NET 8 de este artículo.
Este tutorial muestra cómo crear y ejecutar una aplicación Blazor con Windows Forms. Aprenderá a:
- Crear un proyecto de aplicación Blazor con Windows Forms.
- Ejecutar la aplicación en Windows.
Requisitos previos
- Plataformas admitidas (documentación de Windows Forms).
- Visual Studio 2022 con la carga de trabajo de Desarrollo de escritorio de .NET
Carga de trabajo de Visual Studio
Si la carga de trabajo de desarrollo de escritorio de .NET no está instalada, use el Instalador de Visual Studio para instalarla. Si desea obtener más información, consulte Modificación de cargas de trabajo, componentes y paquetes de idioma de Visual Studio.
Creación de un proyecto de Blazor en Windows Forms
Inicie Visual Studio. En Ventana de inicio, seleccione Crear un proyecto:
En el cuadro de diálogo Crear un proyecto, filtre la lista desplegable Tipos de proyecto por Escritorio. Seleccione la plantilla de proyecto de C# Aplicación de Windows Forms y seleccione el botón Siguiente:
En el cuadro de diálogo Configura el proyecto nuevo:
- Establece el nombre del proyecto a WinFormsBlazor.
- Elige una ubicación adecuada para el proyecto.
- Haga clic en el botón Siguiente.
En el cuadro de diálogo Información adicional, selecciona la versión del marco con la lista desplegable de Marco. Seleccione el botón Crear:
Use el Administrador de paquetes de NuGet para instalar el paquete de NuGet Microsoft.AspNetCore.Components.WebView.WindowsForms:
En el Explorador de soluciones, haz clic con el botón derecho en el nombre del proyecto, WinFormsBlazor y seleccione Editar archivo de proyecto para abrir el archivo del proyecto (WinFormsBlazor.csproj).
Al principio del archivo de proyecto, cambie el SDK a Microsoft.NET.Sdk.Razor:
<Project Sdk="Microsoft.NET.Sdk.Razor">
Guarde los cambios realizados en el archivo del proyecto (WinFormsBlazor.csproj).
Agregue un archivo _Imports.razor a la raíz del proyecto con una directiva @using para Microsoft.AspNetCore.Components.Web.
_Imports.razor:
@using Microsoft.AspNetCore.Components.Web
Guarde el archivo _Imports.razor.
Agregue una carpeta wwwroot al proyecto.
Agregue un archivo index.html a la carpeta wwwroot con el siguiente marcado:
wwwroot/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WinFormsBlazor</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="WinFormsBlazor.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui" data-nosnippet>
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webview.js"></script>
</body>
</html>
Dentro de la carpeta wwwroot, cree una carpeta css para contener las hojas de estilos.
Agregue un archivo app.css a la carpeta wwwroot/css con el siguiente contenido:
wwwroot/css/app.css:
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1:focus {
outline: none;
}
a, .btn-link {
color: #0071c1;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
Dentro de la carpeta wwwroot/css, cree una carpeta bootstrap. Dentro de la carpeta bootstrap, coloque una copia de bootstrap.min.css. Puede obtener la versión más reciente de bootstrap.min.css desde el sitio web de Bootstrap. Siga los vínculos de la barra de navegación a Documentación>Descargar. No se puede proporcionar un vínculo directo aquí porque todo el contenido del sitio tiene versiones en la dirección URL.
Agregue el siguiente componente Counter a la raíz del proyecto, que es el componente Counter predeterminado en las plantillas de proyecto Blazor.
Counter.razor:
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Guarde el componente Counter (Counter.razor).
En el Explorador de soluciones, haga doble clic en el archivo Form1.cs para abrir el diseñador:
Abra el Cuadro de herramientas seleccionando el botón Cuadro de herramientas en el borde izquierdo de la ventana de Visual Studio o seleccionando el comando de menú Ver>Cuadro de herramientas.
Busque el control BlazorWebView en Microsoft.AspNetCore.Components.WebView.WindowsForms. Arrastre BlazorWebView desde el Cuadro de herramientas hasta el diseñador Form1. Tenga cuidado de no arrastrar accidentalmente un control WebView2 hasta el formulario.
Visual Studio muestra el control BlazorWebView en el diseñador de formularios como WebView2 y nombra automáticamente el control blazorWebView1:
En Form1, seleccione BlazorWebView (WebView2) con un solo clic.
En las propiedades de BlazorWebView, confirme que el control se denomina blazorWebView1. Si el nombre no es blazorWebView1, se ha arrastrado el control incorrecto desde el Cuadro de herramientas. Elimine el control WebView2 de Form1 y arrastre el control BlazorWebView hasta el formulario.
En las propiedades del control, cambie el valor de Acoplar de BlazorWebView a Rellenar:
En el diseñador Form1, haga clic con el botón derecho en Form1 y seleccione Ver código.
Agregue los espacios de nombres para Microsoft.AspNetCore.Components.WebView.WindowsForms y Microsoft.Extensions.DependencyInjection al principio del archivo Form1.cs:
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
Dentro del constructor Form1, después de la llamada al método InitializeComponent, agregue el siguiente código:
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");
Nota:
El método InitializeComponent se genera automáticamente en tiempo de compilación de la aplicación y se agrega al objeto de compilación para la clase que realiza la llamada.
Código de C# final completo de Form1.cs con un espacio de nombres con ámbito de archivo:
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
namespace WinFormsBlazor;
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");
}
}
Ejecutar la aplicación
Seleccione el botón de inicio en la barra de herramientas de Visual Studio:
La aplicación ejecutándose en Windows:
Pasos siguientes
En este tutorial, ha aprendido a:
- Crear un proyecto de aplicación Blazor con Windows Forms.
- Ejecutar la aplicación en Windows.
Más información sobre las aplicaciones Blazor Hybrid:
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de