Criar um aplicativo Blazor do Windows Forms
Observação
Esta não é a versão mais recente deste artigo. Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.
Importante
Essas informações relacionam-se ao produto de pré-lançamento, que poderá ser substancialmente modificado antes do lançamento comercial. A Microsoft não oferece nenhuma garantia, explícita ou implícita, quanto às informações fornecidas aqui.
Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.
Este tutorial mostra como criar e executar um aplicativo Blazor do Windows Forms. Você aprenderá como:
- Crie um projeto de aplicativo Blazor do Windows Forms
- Executar o aplicativo no Windows
Pré-requisitos
- Plataformas com suporte (documentação do Windows Forms)
- Visual Studio 2022 com a carga de trabalho do desenvolvimento para área de trabalho .NET
Carga de trabalho do Visual Studio
Se a carga de trabalho de desenvolvimento do .NET para área de trabalho não estiver instalada, use o instalador do Visual Studio para instalar a carga de trabalho. Para obter mais informações, confira Modificar cargas de trabalho, componentes e pacotes de idiomas do Visual Studio.
Criar um projeto Blazor do Windows Forms
Inicie o Visual Studio. Na janela Iniciar, selecione Criar projeto:
Na caixa de diálogo Criar um projeto, filtre a lista suspensa Tipo de projeto para Área de trabalho. Selecione o modelo de projeto C# para Aplicativo do Windows Forms e selecione o botão Avançar:
Na caixa de diálogo Configurar novo projeto:
- Defina o Nome do projeto como WinFormsBlazor.
- Escolha um local adequado para o projeto.
- Selecione o botão Avançar.
Na caixa de diálogo Informações adicionais, selecione a versão da estrutura com a lista suspensa Estrutura. Selecione o botão Criar:
Use o Gerenciador de Pacotes NuGet para instalar o pacote NuGet Microsoft.AspNetCore.Components.WebView.WindowsForms:
Em Gerenciador de Soluções, clique com o botão direito do mouse no nome do projeto WinFormsBlazor e selecione Editar Arquivo de Projeto para abrir o arquivo de projeto (WinFormsBlazor.csproj).
Na parte superior do arquivo de projeto, altere o SDK para Microsoft.NET.Sdk.Razor:
<Project Sdk="Microsoft.NET.Sdk.Razor">
Salve suas alterações no arquivo de projeto (WinFormsBlazor.csproj).
Adicione um arquivo _Imports.razor à raiz do projeto com uma diretiva @using para Microsoft.AspNetCore.Components.Web.
_Imports.razor:
@using Microsoft.AspNetCore.Components.Web
Salve o arquivo _Imports.razor.
Adicione uma pasta wwwroot ao projeto.
Adicione um arquivo index.html à pasta wwwroot com a marcação a seguir.
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>
Na pasta wwwroot, crie uma pasta css para armazenar folhas de estilos.
Adicione uma folha de estilos app.css à pasta wwwroot/css com o conteúdo a seguir.
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 da pasta wwwroot/css, crie uma pasta bootstrap. Dentro da pasta bootstrap, coloque uma cópia de bootstrap.min.css. Você pode obter a versão mais recente do bootstrap.min.css do site do Bootstrap. Siga os links da barra de navegação para Documentação>Download. Um link direto não pode ser fornecido aqui porque todo o conteúdo no site é versão na URL.
Adicione o componente Counter a seguir à raiz do projeto, que é o componente padrão Counter encontrado em modelos de projeto do 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++;
}
}
Salve o componente Counter (Counter.razor).
No Gerenciador de Soluções, clique duas vezes no arquivo Form1.cs para abrir o designer:
Abra a Caixa de Ferramentas selecionando o botão Caixa de Ferramentas na borda esquerda da janela do Visual Studio ou selecionando o comando de menu Exibir>Caixa de Ferramentas.
Localize o controle BlazorWebView em Microsoft.AspNetCore.Components.WebView.WindowsForms. Arraste o BlazorWebView da Caixa de Ferramentas para o designer Form1. Tenha cuidado para não arrastar acidentalmente um controle WebView2 para o formulário.
O Visual Studio mostra o controle BlazorWebView no designer de formulários como WebView2 e nomeia automaticamente o controle blazorWebView1:
Em Form1, selecione o BlazorWebView (WebView2) com um único clique.
Em Propriedades do BlazorWebView, confirme se o controle é chamado blazorWebView1. Se o nome não for blazorWebView1, o controle errado foi arrastado da Caixa de Ferramentas. Exclua o controle WebView2 em Form1 e arraste o controle BlazorWebView para o formulário.
Nas propriedades do controle, altere o valor do Dock do BlazorWebView para Fill:
No designer Form1, clique com o botão direito do mouse em Form1 e selecione Exibir Código.
Adicione namespaces para Microsoft.AspNetCore.Components.WebView.WindowsForms e Microsoft.Extensions.DependencyInjection na parte superior do arquivo Form1.cs:
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
Dentro do construtor Form1, após a chamada de método InitializeComponent, adicione o seguinte código:
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");
Observação
O método InitializeComponent é gerado automaticamente no momento da criação do aplicativo e adicionado ao objeto de compilação da classe de chamada.
O código C# final completo de Form1.cs com um namespace com escopo de arquivo:
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");
}
}
Executar o aplicativo
Selecione o botão Iniciar na barra de ferramentas do Visual Studio:
O aplicativo em execução no Windows:
Próximas etapas
Neste tutorial, você aprendeu a:
- Crie um projeto de aplicativo Blazor do Windows Forms
- Executar o aplicativo no Windows
Saiba mais sobre os aplicativos Blazor Hybrid:
Comentários
Brevemente: Ao longo de 2024, vamos descontinuar progressivamente o GitHub Issues como mecanismo de feedback para conteúdos e substituí-lo por um novo sistema de feedback. Para obter mais informações, veja: https://aka.ms/ContentUserFeedback.
Submeter e ver comentários