Baca dalam bahasa Inggris

Bagikan melalui


Pengikatan Blazor Seluler Eksperimental

Pengikatan Blazor Seluler Eksperimental memungkinkan pengembang untuk membangun aplikasi seluler asli dan hibrid menggunakan C# dan .NET untuk Android, iOS, Windows, macOS, dan Tizen menggunakan pola pemrograman web yang sudah dikenal. Experimental Mobile Blazor Bindings menggunakan sintaks Razor untuk menentukan komponen dan perilaku UI aplikasi. Komponen UI yang mendasar didasarkan pada komponen UI asli Xamarin.Forms dan di aplikasi hibrid mereka dicampur dengan elemen HTML.

Blazor berjalan pada .NET Standard 2.0 sehingga Anda dapat berbagi kode .NET Anda dengan sebagian besar aplikasi .NET lainnya.

Dengan Pengikatan Blazor Seluler, mudah untuk membangun UI asli dengan label, tombol, dan komponen UI asli lainnya:

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

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

Dan di sini berjalan di Emulator Android:

Aplikasi asli sederhana yang berjalan di Android Emulator

Dan Anda dapat membuat aplikasi hibrid yang mencampur UI asli dan UI HTML di layar yang sama, semuanya berbagi logika dan status aplikasi yang sama:

  • /Main.razor: (UI asli)

    @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: (UI HTML)

    @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
    }
    

Dan di sini berjalan di Simulator iOS, dengan UI asli di atas, dan UI HTML di bagian bawah, berbagi logika dan status aplikasi:

Aplikasi hibrid sederhana yang berjalan di Simulator iOS

Untuk membuat aplikasi pertama Anda, lihat topik berikut:

Dan ketika Anda siap untuk lebih banyak, lihat panduan:

Kemudian beberapa topik lanjutan:

Dan akhirnya, jika Anda ingin berkontribusi, lihat topik-topik ini: