試験的なモバイル Blazor バインド

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

実験的なモバイル 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 を提供します

最後に、投稿する場合は、次のトピックをチェックします。

試験的なモバイル Blazor バインド

その他のリソース