Partilhar via

Crie uma aplicação Windows Forms Blazor

Observação

Esta não é a versão mais recente deste artigo. Para a versão atual, consulte a versão .NET 10 deste artigo.

Advertência

Esta versão do ASP.NET Core não é mais suportada. Para obter mais informações, consulte a Política de suporte do .NET e do .NET Core. Para a versão atual, consulte a versão .NET 10 deste artigo.

Este tutorial mostra-te como construir e executar uma aplicação Windows Forms Blazor . Você aprende a:

  • Criar um projeto de aplicação Windows Forms Blazor
  • Executar a aplicação no Windows

Pré-requisitos

Carga de trabalho do Visual Studio

Se a carga de trabalho de desenvolvimento da área de trabalho .NET não estiver instalada, use o instalador do Visual Studio para instalar a carga de trabalho. Para obter mais informações, consulte Modificar cargas de trabalho, componentes e pacotes de idiomas do Visual Studio.

Seleção de carga de trabalho do instalador do Visual Studio para desenvolvimento de aplicações .NET para ambiente de trabalho.

Criar um projeto Windows Forms Blazor

Inicie o Visual Studio. Na janela Iniciar, selecione Criar um novo projeto:

Crie uma nova solução no Visual Studio.

Na caixa de diálogo Criar um novo projeto, filtre a lista suspensa Tipo de projeto para Desktop. Selecione o modelo de projeto C# para a aplicação Windows Forms e selecione o botão Seguinte :

Crie um novo projeto no Visual Studio.

Na caixa de diálogo Configurar seu novo projeto :

  • Defina o nome do projeto como WinFormsBlazor.
  • Escolha um local adequado para o projeto.
  • Selecione o botão Avançar.

Configure o projeto.

Na caixa de diálogo Informações adicionais, selecione a versão do framework com a lista suspensa Framework. Selecione o botão Criar :

O diálogo de Informação Adicional.

Use o Gerenciador de Pacotes NuGet para instalar o Microsoft.AspNetCore.Components.WebView.WindowsForms pacote NuGet:

Use o Gestor de Pacotes Nuget no Visual Studio para instalar o pacote NuGet Microsoft.AspNetCore.Components.WebView.WindowsForms.

No Gerenciador de Soluções, WinFormsBlazorclique com o botão direito do mouse no nome do projeto 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 as alterações no arquivo de projeto (WinFormsBlazor.csproj).

Adicione um _Imports.razor arquivo à raiz do projeto com uma @using diretiva para Microsoft.AspNetCore.Components.Web.

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

Guarde o ficheiro _Imports.razor.

Adicione uma wwwroot pasta ao projeto.

Adicione um index.html arquivo à wwwroot pasta com a seguinte marcação.

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 da wwwroot pasta, cria uma css pasta para guardar folhas de estilo.

Adicione uma app.css folha de estilo à wwwroot/css pasta com o seguinte conteúdo.

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 wwwroot/css pasta, crie uma bootstrap pasta. Dentro da bootstrap pasta, coloque uma cópia do bootstrap.min.css. Você pode obter a versão mais recente do bootstrap.min.cssno site do Bootstrap. Como todo o conteúdo do site está versionado na URL, não é possível fornecer um link direto aqui. Portanto, siga os links da barra de navegação para Docs>Download para obter bootstrap.min.css.

Adicione o seguinte Counter componente à raiz do projeto, que é o componente padrão Counter encontrado nos Blazor modelos de projeto.

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 Counter componente (Counter.razor).

No Explorador de Soluções, clique duas vezes no Form1.cs ficheiro para abrir o designer:

O ficheiro Form1.cs no Explorador de Soluções.

Abra a Caixa de Ferramentas selecionando o botão Caixa de Ferramentas na borda esquerda da janela do Visual Studio ou selecionando o comando do menu Ver>Caixa de Ferramentas .

Localize o BlazorWebView controlo em Microsoft.AspNetCore.Components.WebView.WindowsForms. Arraste o BlazorWebView da Caixa de Ferramentas para o Form1 interface de design. Tenha cuidado para não arrastar acidentalmente um WebView2 controlo para dentro do formulário.

BlazorWebView na caixa de ferramentas.

O Visual Studio mostra o BlazorWebView controlo no designer de formulários como WebView2 e nomeia automaticamente o controlo blazorWebView1:

BlazorWebView no designer do Form1.

Em Form1, selecione o BlazorWebView (WebView2) com um único clique.

Nas BlazorWebViewPropriedades, confirme que o controlo está denominado blazorWebView1. Se o nome não for blazorWebView1, o controlo errado foi arrastado da Caixa de Ferramentas. Elimina o controlo em e arrasta o controlo para dentro do formulário.

O BlazorWebView é automaticamente designado 'blazorWebView1' pelo Visual Studio.

Nas propriedades do controlo, altere o valor de BlazorWebView de para Fill:

Propriedades do BlazorWebView com Dock definido para Preencher.

No Form1 designer, clique Form1 com o botão direito e selecione Ver Código.

Adicione espaços de nomes para Microsoft.AspNetCore.Components.WebView.WindowsForms e Microsoft.Extensions.DependencyInjection no topo do Form1.cs ficheiro:

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

Dentro do Form1 construtor, após a chamada do InitializeComponent método, 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 InitializeComponent método é gerado automaticamente no momento da compilação do aplicativo e adicionado ao objeto de compilação para a classe de chamada.

O código C# final e completo de Form1.cs com um namespace de escopo de ficheiro:

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:

Botão Iniciar da barra de ferramentas do Visual Studio.

A aplicação em execução no Windows:

O aplicativo em execução no Windows.

Próximos passos

Neste tutorial, você aprendeu como:

  • Criar um projeto de aplicação Windows Forms Blazor
  • Executar a aplicação no Windows

Saiba mais sobre Blazor Hybrid aplicações:

ASP.NET Núcleo Blazor Hybrid

  • Last updated on