Xamarin.Forms Pemandangan

Artikel
07/09/2020

Xamarin.Forms tampilan adalah blok penyusun antarmuka pengguna seluler lintas platform.

Tampilan adalah objek antarmuka pengguna seperti label, tombol, dan slider yang umumnya dikenal sebagai kontrol atau widget di lingkungan pemrograman grafis lainnya. Tampilan yang didukung oleh Xamarin.Forms semua berasal dari View kelas . Mereka dapat dibagi menjadi beberapa kategori:

Tampilan untuk presentasi

Tipe	Deskripsi	Tampilan
`BoxView`	`BoxView` menampilkan persegi panjang solid yang diwarnai `Color` oleh properti . `BoxView` memiliki permintaan ukuran default 40x40. Untuk ukuran lain, tetapkan `WidthRequest` properti dan `HeightRequest` . Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Ellipse`	`Ellipse` menampilkan elips atau lingkaran ukuran `WidthRequest` x `HeightRequest`. Untuk melukis bagian dalam elips, atur propertinya `Fill` ke `Color`. Untuk memberikan kerangka elips, atur propertinya `Stroke` ke `Color`. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Label`	`Label` menampilkan string teks baris tunggal atau blok teks multibaris, baik dengan pemformatan konstanta atau variabel. Atur `Text` properti ke string untuk pemformatan konstanta, atau atur `FormattedText` properti ke `FormattedString` objek untuk pemformatan variabel. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Line`	`Line` menampilkan garis dari titik awal ke titik akhir. Titik awal diwakili oleh `X1` properti dan `Y1` , sementara titik akhir diwakili oleh `X2` properti dan `Y2` . Untuk mewarnai garis, atur propertinya `Stroke` ke `Color`. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Image`	`Image` menampilkan bitmap. Bitmap dapat diunduh melalui Web, disematkan sebagai sumber daya dalam proyek umum atau proyek platform, atau dibuat menggunakan objek .NET `Stream` . Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Map`	`Map` menampilkan peta. Xamarin.Forms.Peta Paket NuGet harus diinstal. Android dan Platform Windows Universal memerlukan kunci otorisasi peta. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`OpenGLView`	`OpenGLView` menampilkan grafik OpenGL di proyek iOS dan Android. Tidak ada dukungan untuk Platform Windows Universal. Proyek iOS dan Android memerlukan referensi ke rakitan OpenTK-1.0 atau rakitan OpenTK versi 1.0.0.0. `OpenGLView` lebih mudah digunakan dalam Proyek Bersama; jika digunakan dalam pustaka Standar .NET, maka Layanan Dependensi juga akan diperlukan (seperti yang ditunjukkan dalam kode sampel). Ini adalah satu-satunya fasilitas grafis yang dibangun ke dalam Xamarin.Forms, tetapi aplikasi Xamarin.Forms juga dapat merender grafik menggunakan `SkiaSharp`, atau `UrhoSharp`. Dokumentasi API	Kode C# untuk halaman XAML halaman / ini dengan kode di belakang
`Path`	`Path` menampilkan kurva dan bentuk kompleks. Properti `Data` menentukan bentuk yang akan digambar. Untuk mewarnai bentuk, atur propertinya `Stroke` ke `Color`. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Polygon`	`Polygon` menampilkan poligon. Properti `Points` menentukan titik puncak poligon, sementara `FillRule` properti menentukan bagaimana pengisian interior poligon ditentukan. Untuk melukis bagian dalam poligon, atur propertinya `Fill` ke `Color`. Untuk memberikan garis luar poligon, atur propertinya `Stroke` ke `Color`. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Polyline`	`Polyline` menampilkan serangkaian garis lurus yang terhubung. Properti `Points` menentukan titik puncak poliline, sementara `FillRule` properti menentukan bagaimana pengisian interior poliline ditentukan. Untuk melukis bagian dalam poliline, atur propertinya `Fill` ke `Color`. Untuk memberikan garis besar pada poliline, atur propertinya `Stroke` ke `Color`. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Rectangle`	`Rectangle` menampilkan persegi panjang atau persegi. Untuk melukis bagian dalam persegi panjang, atur propertinya `Fill` ke `Color`. Untuk memberikan kerangka persegi panjang, atur propertinya `Stroke` ke `Color`. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`WebView`	`WebView` menampilkan halaman Web atau isi HTML, berdasarkan apakah `Source` properti diatur ke objek `UriWebViewSource` atau `HtmlWebViewSource` . Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini

Tampilan yang memulai perintah

Tipe	Deskripsi	Tampilan
`Button`	`Button` adalah objek persegi panjang yang menampilkan teks, dan yang menembakkan `Clicked` peristiwa saat ditekan. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini dengan kode di belakang
`ImageButton`	`ImageButton` adalah objek persegi panjang yang menampilkan gambar, dan yang menembakkan `Clicked` peristiwa saat ditekan. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini dengan kode di belakang
`RadioButton`	`RadioButton` memungkinkan pemilihan satu opsi dari satu set, dan mengaktifkan `CheckedChanged` peristiwa saat pemilihan terjadi. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini dengan kode di belakang
`RefreshView`	`RefreshView` adalah kontrol kontainer yang menyediakan fungsionalitas pull-to-refresh untuk konten yang dapat digulir. Ditentukan `ICommand` oleh `Command` properti dijalankan ketika refresh dipicu, dan `IsRefreshing` properti menunjukkan status kontrol saat ini. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini dengan kode di belakang
`SearchBar`	`SearchBar` menampilkan area bagi pengguna untuk mengetik string teks, dan tombol (atau tombol keyboard) yang memberi sinyal kepada aplikasi untuk melakukan pencarian. Properti `Text` menyediakan akses ke teks, dan `SearchButtonPressed` peristiwa menunjukkan bahwa tombol telah ditekan. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini dengan kode di belakang
`SwipeView`	`SwipeView` adalah kontrol kontainer yang membungkus item konten, dan menyediakan item menu konteks yang diungkapkan oleh gerakan gesek. Setiap item menu diwakili oleh `SwipeItem`, yang memiliki `Command` properti yang menjalankan `ICommand` saat item diketuk. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini dengan kode di belakang

Tampilan untuk nilai pengaturan

Tipe	Deskripsi	Tampilan
`CheckBox`	`CheckBox` memungkinkan pengguna untuk memilih nilai Boolean menggunakan jenis tombol yang dapat dicentang atau kosong. Properti `IsChecked` adalah status `CheckBox`, dan `CheckedChanged` peristiwa diaktifkan ketika status berubah. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Slider`	`Slider` memungkinkan pengguna untuk memilih `double` nilai dari rentang berkelanjutan yang ditentukan dengan `Minimum` properti dan `Maximum` . Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Stepper`	`Stepper` memungkinkan pengguna untuk memilih `double` nilai dari rentang nilai tambahan yang ditentukan dengan `Minimum`properti , , `Maximum`dan `Increment` . Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Switch`	`Switch` mengambil bentuk sakelar aktif/nonaktif untuk memungkinkan pengguna memilih nilai Boolean. Properti `IsToggled` adalah status sakelar, dan `Toggled` peristiwa diaktifkan saat status berubah. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`DatePicker`	`DatePicker` memungkinkan pengguna untuk memilih tanggal dengan pemilih tanggal platform. Atur rentang tanggal yang diperbolehkan dengan `MinimumDate` properti dan `MaximumDate` . Properti `Date` adalah tanggal yang dipilih, dan `DateSelected` peristiwa diaktifkan saat properti tersebut berubah. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`TimePicker`	`TimePicker` memungkinkan pengguna untuk memilih waktu dengan pemilih waktu platform. Properti `Time` adalah waktu yang dipilih. Aplikasi dapat memantau perubahan dalam `Time` properti dengan menginstal handler untuk peristiwa tersebut `PropertyChanged` . Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini

Tampilan untuk mengedit teks

Kedua kelas ini berasal dari InputView kelas , yang mendefinisikan Keyboard properti :

Tipe	Deskripsi	Tampilan
`Entry`	`Entry` memungkinkan pengguna untuk memasukkan dan mengedit satu baris teks. Teks tersedia sebagai `Text` properti, dan `TextChanged` peristiwa dan `Completed` diaktifkan saat teks berubah atau pengguna memberi sinyal penyelesaian dengan mengetuk kunci enter. `Editor` Gunakan untuk memasukkan dan mengedit beberapa baris teks. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Editor`	`Editor` memungkinkan pengguna untuk memasukkan dan mengedit beberapa baris teks. Teks tersedia sebagai `Text` properti, dan `TextChanged` peristiwa dan `Completed` diaktifkan saat teks berubah atau pengguna memberi sinyal penyelesaian. `Entry` Gunakan tampilan untuk memasukkan dan mengedit satu baris teks. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini

Tampilan untuk menunjukkan aktivitas

Tipe	Deskripsi	Tampilan
`ActivityIndicator`	`ActivityIndicator` menggunakan animasi untuk menunjukkan bahwa aplikasi terlibat dalam aktivitas panjang tanpa memberikan indikasi kemajuan. Properti `IsRunning` mengontrol animasi. Jika kemajuan aktivitas diketahui, gunakan sebagai `ProgressBar` gantinya. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`ProgressBar`	`ProgressBar` menggunakan animasi untuk menunjukkan bahwa aplikasi mengalami kemajuan melalui aktivitas panjang. Atur `Progress` properti ke nilai antara 0 dan 1 untuk menunjukkan kemajuan. Jika kemajuan aktivitas tidak diketahui, gunakan sebagai `ActivityIndicator` gantinya. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini dengan kode di belakang

Tampilan yang menampilkan koleksi

Tipe	Deskripsi	Tampilan
`CarouselView`	`CarouselView` menampilkan daftar item data yang dapat digulir. Atur `ItemsSource` properti ke kumpulan objek, dan atur `ItemTemplate` properti ke objek yang `DataTemplate` menjelaskan bagaimana item akan diformat. Peristiwa menandakan `CurrentItemChanged` bahwa item yang ditampilkan saat ini telah berubah, yang tersedia sebagai `CurrentItem` properti . Panduan	Kode C# untuk halaman XAML halaman / ini
`CollectionView`	`CollectionView` menampilkan daftar item data yang dapat digulir yang dapat dipilih, menggunakan spesifikasi tata letak yang berbeda. Ini bertujuan untuk memberikan alternatif yang lebih fleksibel, dan berkinerja untuk `ListView`. Atur `ItemsSource` properti ke kumpulan objek, dan atur `ItemTemplate` properti ke objek yang `DataTemplate` menjelaskan bagaimana item akan diformat. Peristiwa menandakan `SelectionChanged` bahwa pilihan telah dibuat, yang tersedia sebagai `SelectedItem` properti . Panduan	Kode C# untuk halaman XAML halaman / ini
`IndicatorView`	`IndicatorView` menampilkan indikator yang menunjukkan jumlah item dalam `CarouselView`. Atur `CarouselView.IndicatorView` properti ke `IndicatorView` objek untuk menampilkan indikator untuk `CarouselView`. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`ListView`	`ListView` berasal dari `ItemsView` dan menampilkan daftar item data yang dapat digulir yang dapat dipilih. Atur `ItemsSource` properti ke kumpulan objek, dan atur `ItemTemplate` properti ke objek yang `DataTemplate` menjelaskan bagaimana item akan diformat. Peristiwa menandakan `ItemSelected` bahwa pilihan telah dibuat, yang tersedia sebagai `SelectedItem` properti . Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini
`Picker`	`Picker` menampilkan item terpilih dari daftar string teks, dan memungkinkan pemilihan item tersebut saat tampilan diketuk. Atur `Items` properti ke daftar string, atau `ItemsSource` properti ke kumpulan objek. Peristiwa `SelectedIndexChanged` diaktifkan saat item dipilih. `Picker` menampilkan daftar item hanya ketika dipilih. `ListView` Gunakan atau `TableView` untuk daftar yang dapat digulir yang tetap ada di halaman. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini dengan kode di belakang
`TableView`	`TableView` menampilkan daftar baris tipe `Cell` dengan header dan subjudul opsional. Atur `Root` properti ke objek jenis `TableRoot`, dan tambahkan `TableSection` objek ke `TableRoot`. Masing-masing `TableSection` adalah kumpulan `Cell` objek. Panduan Dokumentasi / API	Kode C# untuk halaman XAML halaman / ini