Создание приложения Windows Forms Blazor
Примечание.
Это не последняя версия этой статьи. В текущем выпуске см . версию .NET 8 этой статьи.
Внимание
Эта информация относится к предварительному выпуску продукта, который может быть существенно изменен до его коммерческого выпуска. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.
В текущем выпуске см . версию .NET 8 этой статьи.
В этом учебнике показано, как создать и запустить приложение Windows Forms Blazor. Узнайте следующие темы:
- Создание проекта приложения Blazor в Windows Forms.
- Запуск приложения в ОС Windows
Необходимые компоненты
- Поддерживаемые платформы (документация по Windows Forms)
- Visual Studio 2022 с рабочей нагрузкой разработки классических приложений .NET
Рабочая нагрузка Visual Studio
Если рабочая нагрузка Разработка классических приложений .NET не установлена, установите ее с помощью Visual Studio Installer. Дополнительные сведения см. в статье Изменение рабочих нагрузок, компонентов и языковых пакетов Visual Studio.
Создание проекта Windows Forms Blazor
Запустите Visual Studio. В окне "Пуск" выберите "Создать проект":
В диалоговом окне "Создание проекта" отфильтруйте раскрывающийся список "Тип проекта" на desktop. Выберите шаблон проекта C# для приложения Windows Forms и нажмите кнопку Далее:
В диалоговом окне "Настройка нового проекта":
- Задайте для имениWinFormsBlazorпроекта значение .
- Выберите подходящее расположение для проекта.
- Нажмите кнопку Далее.
В диалоговом окне "Дополнительные сведения" выберите версию платформы с раскрывающимся списком Framework. Нажмите кнопку Создать.
Используйте Диспетчер пакетов NuGet для установки пакета NuGet Microsoft.AspNetCore.Components.WebView.WindowsForms.
В Обозреватель решений щелкните правой кнопкой мыши имя проекта и выберите "Изменить файл проекта", WinFormsBlazorчтобы открыть файл проекта (WinFormsBlazor.csproj).
В верхней части файла проекта измените пакет SDK на Microsoft.NET.Sdk.Razor:
<Project Sdk="Microsoft.NET.Sdk.Razor">
Сохраните изменения в файле проекта (WinFormsBlazor.csproj).
Добавьте файл _Imports.razor в корневой каталог проекта с директивой @using для Microsoft.AspNetCore.Components.Web.
_Imports.razor:
@using Microsoft.AspNetCore.Components.Web
Сохраните файл _Imports.razor.
Добавьте папку wwwroot в проект.
Добавьте файл index.html в папку wwwroot с указанными далее исправлениями.
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>
В папке wwwroot создайте папку css для хранения таблиц стилей.
Добавьте таблицу стилей app.css в папку wwwroot/css с указанным далее содержимым.
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;
}
Внутри папки wwwroot/css создайте папку bootstrap. В папке bootstrap поместите копию bootstrap.min.css. Последнюю версию bootstrap.min.css можно получить на веб-сайте Bootstrap. Перейдите по ссылкам панели навигации к документации>по скачиванию. Прямая ссылка не может быть предоставлена здесь, так как все содержимое на сайте версии в URL-адресе.
Добавьте в корень проекта следующий компонент Counter, который является компонентом Counter по умолчанию, встречающимся в шаблонах проектов 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++;
}
}
Сохраните Counter компонент (Counter.razor).
В Обозревателе решений дважды щелкните файл Form1.cs, чтобы открыть конструктор:
Откройте панель элементов. Для этого нажмите кнопку Панель элементов в левом краю окна Visual Studio или выберите в меню Вид>Панель элементов.
Найдите элемент управления BlazorWebView под Microsoft.AspNetCore.Components.WebView.WindowsForms. Перетащите BlazorWebView из панели элементов в конструктор Form1. Будьте осторожны, чтобы случайно не перетащить в форму элемент управления WebView2.
В конструкторе форм Visual Studio отображает элемент управления BlazorWebView как WebView2 и автоматически присваивает имя элементу управления blazorWebView1:
В Form1 выберите BlazorWebView (WebView2) одним щелчком мыши.
В разделе СвойстваBlazorWebView убедитесь, что элемент управления называется blazorWebView1. Если это не blazorWebView1, значит вы перетащили из панели элементов не тот элемент управления. В Form1 удалите элемент управления WebView2 и перетащите в форму элемент управления BlazorWebView.
В свойствах элемента управления измените у BlazorWebView значение Dock на Fill:
В конструкторе Form1 щелкните правой кнопкой мыши Form1 и выберите команду Просмотреть код.
Добавьте пространства имен для Microsoft.AspNetCore.Components.WebView.WindowsForms и Microsoft.Extensions.DependencyInjection в начало файла Form1.cs:
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
Внутри конструктора Form1 после вызова метода InitializeComponent добавьте следующий код:
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");
Примечание.
Метод InitializeComponent автоматически создается во время сборки приложения и добавляется в объект компиляции для вызывающего класса.
Последний полный код Form1.cs C# с пространством имен область файла:
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");
}
}
Выполнить приложение
Нажмите кнопку запуска на панели инструментов Visual Studio:
Приложение, работающее в Windows:
Следующие шаги
Из этого руководства вы узнали, как:
- Создание проекта приложения Blazor в Windows Forms.
- Запуск приложения в ОС Windows
Дополнительные сведения о приложениях Blazor Hybrid:
ASP.NET Core
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по