實驗性行動裝置 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 模擬器中執行:
而且,您可以建置混合原生 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:
若要建置您的第一個應用程式,請參閱下列主題:
- 開始 設定您的開發環境。
- 使用原生 UI 元件建置您的第一個應用程式。
- 使用原生 UI 元件和 HTML UI 混合建置您的第一個混合式應用程式。
當您準備好深入瞭解時,請參閱逐步解說:
然後,一些進階主題:
- 相依性插入 - 註冊和共用應用程式部分之間的服務
- 撰寫自訂群組件 - 在應用程式中建置可重複使用的元件
- Xamarin.Essentials - 為開發人員提供其行動應用程式的跨平臺 API
最後,如果您想要參與,請查看下列主題: