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

[アーティクル]
08/22/2023

重要

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

注意

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

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

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

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

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

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

Counter 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++;
}
```
このコードは、コンポーネントTextのプロパティのcount計算値としても使用されるフィールドを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 コンポーネントは、ファイルと同じ名前のクラスにコンパイルされます。名前空間は、プロジェクトのルート名前空間に加え、フォルダー名 (存在する場合) はドット (.) で区切られます。型は、その型名 (一般的ではない) を介して他の C# コードによって参照することも、 .razor タグとして使用してファイル内で参照することもできます。

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

Counter Blazor コンポーネント

HelloWorld Blazor コンポーネント

その他のリソース