Hello World - 其運作方式為何？

發行項
08/22/2023

重要

此專案是實驗性版本。我們希望您嘗試實驗性行動裝置 Blazor 系結，並在提供意見反應 https://github.com/xamarin/MobileBlazorBindings 。

注意

此頁面是建置您的第一個應用程式逐步解說的接續。建議您先完成該逐步解說，再繼續進行。

讓我們看看先前逐步解說中建立的初始專案，以深入瞭解如何使用實驗行動裝置 Blazor 系結。

要查看的主要專案是包含檔案的 .razor 共用專案。 Android 和 iOS 專案不包含實驗性行動裝置 Blazor 系結特有的任何程式碼。

這些是共用專案中的檔案：

_Imports.razor - 包含一般指示詞，這些指示詞會套用至此資料夾中的所有其他 .razor 檔案及其子資料夾中。子資料夾可以使用其他指示詞有自己的 _Imports.razor 檔案。此檔案中最常見的指示詞類型是 @using 指示詞，用來將命名空間匯入 .razor 檔案中，與 C# using 語句完全相同。
App.cs - 包含應用程式的主要 UI 進入點，由衍生自基類的 Xamarin.Forms.Application 類別表示。這個類別的建構函式會具現化泛型主機、將服務新增至主機， (預設專案沒有) ，然後使用主機將名為 HelloWorld 的 Blazor 元件新增至應用程式元素， (this) 。
Counter.razor - 包含名為的 Counter Blazor 元件。
HelloWorld.razor - 包含名為的 HelloWorld Blazor 元件。

讓我們深入探討這兩個 Blazor 元件，以瞭解其運作方式。

計數器 Blazor 元件

此元件包含兩個區段：

定義 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 元件。某些屬性具有計算值，例如 Label 元件的 Text 屬性，其值設定為 C# 程式碼所計算的值，由運算式區塊表示 @( ... ) 。

當事件處理常式執行時，例如 Button 元件的 OnClick 事件，元件會自動重新轉譯，讓 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 元件都會編譯成與檔案同名的類別。命名空間是專案的根命名空間，如果有任何名稱，則會以點分隔 () . 。其他 C# 程式碼可以透過其型別名稱來參考類型， (不是常見的) ，或是 .razor 透過將它當做標記來參考檔案中。

共用方式為

Hello World - 其運作方式為何？

計數器 Blazor 元件

HelloWorld Blazor 元件

其他資源