Hello World - как это работает?

Давайте рассмотрим первоначальный проект, созданный в предыдущем пошаговом руководстве, чтобы понять, как использовать экспериментальные мобильные привязки Blazor.

Main проектом для просмотра является общий проект, содержащий .razor файлы. Проекты Android и iOS не содержат код, характерный для экспериментальных привязок Blazor для мобильных устройств.

Ниже приведены файлы в общем проекте:

• _Imports.razor — содержит общие директивы, применяемые ко всем остальным .razor файлам в этой папке и ее вложенных папках. Вложенные папки могут содержать собственные _Imports.razor файлы с дополнительными директивами. Наиболее распространенным типом директивы в этом файле является директива @using , которая используется для импорта пространства имен в .razor файлы, точно так же, как оператор C# using .
• App.cs— содержит точку входа main пользовательского интерфейса приложения, представленную классом, производным от Xamarin.Forms.Application базового класса. Конструктор этого класса создает экземпляр универсального узла, добавляет службы к узлу (в проекте по умолчанию нет), а затем использует узел для добавления компонента Blazor с именем HelloWorld в элемент приложения (this).
• Counter.razor — содержит компонент Blazor с именем Counter.
• HelloWorld.razor — содержит компонент Blazor с именем HelloWorld.

Давайте рассмотрим два компонента Blazor, чтобы узнать, как они работают.

Компонент Counter Blazor

Этот компонент содержит два раздела:

1. Разметка, определяющая элементы пользовательского интерфейса и связанные с ними свойства и обработчики событий:

   <Frame CornerRadius="10" BackgroundColor="Color.LightBlue">
   
       <StackLayout Orientation="StackOrientation.Horizontal" HorizontalOptions="LayoutOptions.Center">
   
           <Button Text="Increment" OnClick="IncrementCount" />
   
           <Label Text="@("The button was clicked " + count + " times")"
               FontAttributes="FontAttributes.Bold"
               VerticalTextAlignment="TextAlignment.Center" />
   
       </StackLayout>
   
   </Frame>
   

   Html-подобные теги представляют компоненты пользовательского интерфейса, соответствующие компонентам Xamarin.Forms, а также их свойствам и событиям. Некоторые свойства имеют вычисляемые значения, например Label свойство компонента Text , для которого задано значение, вычисленное кодом C#, которое обозначается блоком выражений @( ... ) .

   При запуске обработчика событий, например Button события компонента OnClick , компонент автоматически повторно отрисовывается, что позволяет пользовательскому интерфейсу обновляться без дополнительной логики. Более сложные сценарии могут управлять тем, какие компоненты будут повторно отображаться и когда.

2. Код, реализующий обработчики событий или другие функциональные возможности компонента, заключенный @code { ... } в блок:

   int count;
   
   void IncrementCount()
   {
       count++;
   }
   

   Этот код увеличивает count значение поля, которое также используется в качестве вычисляемого Label значения свойства компонента Text . После запуска обработчика IncrementCount() событий при повторной отрисовки count пользовательского интерфейса будет использоваться новое значение .

Компонент HelloWorld Blazor

Компонент HelloWorld содержит только разметку:

<ContentView>
    <StackLayout Margin="new Thickness(20)">

        <Label Text="Hello, World!"
               FontSize="40" />

        <Counter />

    </StackLayout>
</ContentView>

Обратите внимание, что на Counter компонент ссылается этот компонент, ссылаясь на него как на тег <Counter />.

Каждый компонент Blazor компилируется в класс с тем же именем, что и файл. Пространство имен — это корневое пространство имен проекта, а также имена папок , если таковые есть, разделенные точками (.). На тип может ссылаться другой код C# через имя типа (не общее) или в .razor файле, используя его в качестве тега.