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:
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:
Untuk membuat aplikasi pertama Anda, lihat topik berikut:
- Mulai menyiapkan lingkungan pengembangan Anda.
- Buat aplikasi pertama Anda menggunakan komponen UI asli.
- Bangun aplikasi hibrid pertama Anda menggunakan campuran komponen UI asli dan UI HTML.
Dan ketika Anda siap untuk lebih banyak, lihat panduan:
Kemudian beberapa topik lanjutan:
- Injeksi dependensi - mendaftarkan dan berbagi layanan antar bagian aplikasi
- Menulis komponen kustom - membangun komponen yang dapat digunakan kembali di aplikasi Anda
- Xamarin.Essentials - memberi pengembang API lintas platform untuk aplikasi seluler mereka
Dan akhirnya, jika Anda ingin berkontribusi, lihat topik-topik ini: