閱讀英文

共用方式為


實驗性行動裝置 Blazor 系結

實驗性行動裝置 Blazor 系結可讓開發人員使用 C# 和 .NET for Android、iOS、Windows、macOS 和 Tizen,使用熟悉的 Web 程式設計模式來建置原生和混合式行動應用程式。 實驗性行動 Blazor 系結會使用 Razor 語法來定義應用程式的 UI 元件和行為。 基礎 UI 元件是以 Xamarin.Forms 原生 UI 元件為基礎,並在混合式應用程式中與 HTML 元素混合。

Blazor 會在 .NET Standard 2.0 上執行,因此您可以與其他大部分的 .NET 應用程式共用 .NET 程式碼。

使用行動 Blazor 系結,使用標籤、按鈕和其他原生 UI 元件輕鬆建置原生 UI:

<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

在這裡,它會在 Android 模擬器中執行:

在 Android 模擬器中執行的簡單原生應用程式

而且,您可以建置混合原生 UI 和 HTML UI 的混合式應用程式,全都共用相同的應用程式邏輯和狀態:

  • /Main.razor: (原生 UI)

    @inject CounterState CounterState
    
    <ContentView>
        <StackLayout>
    
            <StackLayout Margin="new Thickness(20)">
                <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" />
                <Button Text="Increment from native" OnClick="@CounterState.IncrementCount" Padding="10" />
            </StackLayout>
    
            <BlazorWebView ContentRoot="WebUI/wwwroot" VerticalOptions="LayoutOptions.FillAndExpand">
                <FirstBlazorHybridApp.WebUI.App />
            </BlazorWebView>
    
        </StackLayout>
    </ContentView>
    
    @code {
        // initialization code
    }
    
  • /WebUI/App.razor: (HTML UI)

    @inject CounterState CounterState
    
    <div style="text-align: center; background-color: lightblue;">
        <div>
            <span style="font-size: 30px; font-weight: bold;">
                You pressed @CounterState.CurrentCount times
            </span>
        </div>
        <div>
            <button style="margin: 20px;" @onclick="ClickMe">Increment from HTML</button>
        </div>
    </div>
    
    @code
    {
        private void ClickMe()
        {
            CounterState.IncrementCount();
        }
    
        // initialization code
    }
    

在這裡,它會在 iOS 模擬器中執行,並在頂端具有原生 UI,並在底部共用應用程式邏輯和狀態的 HTML UI:

在 iOS 模擬器中執行的簡單混合式應用程式

若要建置您的第一個應用程式,請參閱下列主題:

當您準備好深入瞭解時,請參閱逐步解說:

然後,一些進階主題:

最後,如果您想要參與,請查看下列主題: