Интерфейс на C# в EyeAuras

Blazor — это мощный инструмент для создания удобных и красивых интерфейсов на C#. Изначально он предназначался для веб-разработки, но мы будем использовать его для интерфейсов в наших скриптах: панелей настроек, оверлеев и всплывающих окон. Всё это можно делать через доступный вам API.

Примеры из этой серии

Все примеры можно скачать здесь. Рекомендую скачать весь набор целиком, а не пытаться импортировать его в текущую версию.

Создаём первый оверлей

Это очень просто:

• Создайте новую ауру

• Добавьте C# Overlay v3

• Готово

На этом этапе у вас уже есть полностью рабочий интерактивный UI.

Если нажать кнопку Click Me, счётчик в программе начнёт обновляться!

Почему именно Blazor?

Blazor отлично подходит для создания интерфейсов, потому что объединяет гибкость и производительность C# с огромными возможностями HTML/CSS и JavaScript. За последние два десятилетия ни в один стек не вкладывали столько ресурсов крупнейшие компании мира. В результате у нас есть инструмент, который позволяет отрисовать практически всё, что можно представить. Загляните на https://codepen.io/ — там много вдохновляющих примеров того, на что способна эта «великолепная троица».

Теперь, когда мы разобрались с сильными сторонами HTML/CSS/JS, давайте поймём, какую роль во всём этом играют C#/Blazor. Коротко: Blazor позволяет генерировать HTML и связывает мир веб-разработки с C#. Наше приложение делится на две части: Razor и C# backend. Razor отвечает за отрисовку данных, а C# — за их подготовку.

EyeAuras — а значит, и ваши скрипты — работает на стыке этих двух технологий. Давайте разберём основные части, с которыми вам предстоит работать.

HTML

Это язык разметки, на котором построен весь Интернет. Он определяет, где на странице будут располагаться текст, кнопки, таблицы и другие элементы. С помощью HTML вы задаёте структуру страницы, которую затем оформляете через...

CSS

Cascading Style Sheets отвечают за внешний вид кнопок, текста и всех остальных элементов. Через CSS настраиваются цвета, прозрачность, анимации и множество других деталей.

Razor

Razor — это язык разметки от Microsoft, который позволяет смешивать HTML, CSS и C# в одном файле.

В созданном C# Overlay v3 откройте UserOverlay.razor и замените его содержимое примером ниже. Для этого варианта весь код находится в Razor; удалите прежние поля и методы счётчика из UserOverlay.cs, если они совпадают по именам. Давайте разберём компонент по частям. В нём будет текст и кнопка, которая увеличивает счётчик при нажатии.

@using Microsoft.AspNetCore.Components.Web
@using PoeShared.Blazor
@inherits BlazorReactiveComponent

<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++;
}

В этом небольшом фрагменте кода HTML и C# работают вместе и дополняют друг друга. C# определяет, что произойдёт при нажатии на кнопку, а HTML/CSS отвечают за то, как всё выглядит.

После клика Blazor вызывает обработчик и обновляет число. Это состояние экземпляра компонента; после его пересоздания счётчик начнётся с нуля. Продолжить можно с устройства оверлея, затем разделения Razor и C#.