試験的なモバイル Blazor バインド
実験的なモバイル Blazor バインドを使用すると、開発者は、使い慣れた Web プログラミング パターンを使用して、Android、iOS、Windows、macOS、Tizen 用の C# と .NET を使用してネイティブおよびハイブリッド モバイル アプリを構築できます。 試験的なモバイル Blazor バインドでは、Razor 構文を使用して、アプリケーションの UI コンポーネントと動作を定義します。 基になる UI コンポーネントは Xamarin.Forms ネイティブ UI コンポーネントに基づいており、ハイブリッド アプリでは HTML 要素と混合されます。
Blazor は .NET Standard 2.0 で実行されるため、.NET コードを他のほとんどの .NET アプリと共有できます。
Mobile 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 を提供します
最後に、投稿する場合は、次のトピックをチェックします。