Hello World - どのように動作しますか?

[アーティクル]
10/05/2022

重要

このプロジェクトは試験的なリリースです。実験用モバイル Blazor バインドを試して、フィードバック https://github.com/xamarin/MobileBlazorBindingsをお寄せください。

Note

このページは、最初のアプリのビルドに関するチュートリアルの続きです。続行する前に、このチュートリアルを完了することをお勧めします。

前のチュートリアルで作成した最初のプロジェクトを見て、Experimental Mobile Blazor Bindings の使用方法の詳細を理解しましょう。

見るメインプロジェクトは、ファイルを含む .razor 共有プロジェクトです。 Android および iOS プロジェクトには、Experimental Mobile Blazor バインドに固有のコードは含まれません。

共有プロジェクト内のファイルは次のとおりです。

_Imports.razor - このフォルダーとそのサブフォルダー内の他 .razor のすべてのファイルに適用される一般的なディレクティブが含まれています。サブフォルダーには、追加のディレクティブを含む独自 _Imports.razor のファイルを含めることができます。このファイルで最も一般的なディレクティブの@using種類は、C# using ステートメントとまったく同じファイルに.razor名前空間をインポートするために使用されるディレクティブです。
App.cs - 基本クラスから派生するクラスによって表される、アプリケーションのメイン UI エントリポイントが Xamarin.Forms.Application 含まれます。このクラスのコンストラクターは、汎用ホストをインスタンス化し、ホストにサービスを追加し (既定のプロジェクトにはなし)、ホストを使用してアプリケーション要素 (this) に名前付きの HelloWorld Blazor コンポーネントを追加します。
Counter.razor - という名前 Counterの Blazor コンポーネントが含まれています。
HelloWorld.razor - という名前 HelloWorldの Blazor コンポーネントが含まれています。

2 つの Blazor コンポーネントの動作を確認してみましょう。

カウンター Blazor コンポーネント

このコンポーネントには、次の 2 つのセクションがあります。

UI 要素とそれに関連付けられているプロパティとイベントハンドラーを定義するマークアップ。
```
<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 コンポーネントとそのプロパティとイベントに一致する UI コンポーネントを表します。一部のプロパティには、コンポーネントのTextプロパティなどのLabel計算値があり、その値は C# コードによって計算された値に設定され、式ブロックによって@( ... )示されます。

コンポーネントOnClickのイベントなどButton、イベントハンドラーが実行されると、コンポーネントは自動的に再レンダリングされます。これにより、追加のロジックなしで UI を更新できます。より高度なシナリオでは、再レンダリングするコンポーネントとタイミングを制御できます。
イベントハンドラーまたはその他のコンポーネント機能を実装するコードで、ブロックに @code { ... } ラップされます。
```
int count;

void IncrementCount()
{
    count++;
}
```
このコードは、フィールドをcountインクリメントします。これは、コンポーネントTextのプロパティのLabel計算値としても使用されます。イベントハンドラーが IncrementCount() 実行されると、UI の再レンダリング時に新しい値 count が使用されます。

HelloWorld Blazor コンポーネント

HelloWorld コンポーネントには、マークアップのみが含まれています。

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

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

        <Counter />

    </StackLayout>
</ContentView>

コンポーネントは Counter タグとして参照することで、このコンポーネントで参照されることに注意してください <Counter />。

すべての Blazor コンポーネントは、ファイルと同じ名前のクラスにコンパイルされます。名前空間は、プロジェクトのルート名前空間に加え、フォルダー名 (存在する場合) はドット (.) で区切られます。型は、その型名 (一般的ではない) を介して、またはタグとして使用してファイル内の他の .razor C# コードによって参照できます。

Hello World - どのように動作しますか?

カウンター Blazor コンポーネント

HelloWorld Blazor コンポーネント

その他のリソース

その他のリソース