Bagikan melalui


Xamarin.Forms Dilihat

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
Contoh BoxView
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
Contoh Elips
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
Contoh Label
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
Contoh Baris
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
Contoh Gambar
Kode C# untuk halaman XAML halaman / ini
Map Map menampilkan peta. . Xamarin.Forms Paket Maps NuGet harus diinstal. Android dan Platform Windows Universal memerlukan kunci otorisasi peta.

Panduan Dokumentasi / API
Contoh Peta
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

Contoh OpenGLView
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
Contoh Jalur
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
Contoh Poligon
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
Contoh Poliline
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
Contoh Persegi Panjang
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
Contoh WebView
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
Contoh Tombol
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
Contoh ImageButton
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
Contoh RadioButton
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
Contoh RefreshView
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
Contoh Bilah Pencarian
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
Contoh SwipeView
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
Contoh Kotak Centang
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
Contoh Penggerak
Kode C# untuk halaman XAML halaman / ini
Stepper Stepper memungkinkan pengguna untuk memilih double nilai dari rentang nilai tambahan yang ditentukan dengan Minimumproperti , , Maximumdan Increment .

Panduan Dokumentasi / API
Contoh Stepper
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
Alihkan Contoh
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
Contoh DatePicker
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
Contoh TimePicker
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
Contoh Entri
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
Contoh Editor
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
Contoh ActivityIndicator
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
Contoh Bilah Kemajuan
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 .

Memandu
Contoh CarouselView
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 .

Memandu
Contoh CollectionView
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
Contoh IndicatorView
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
Contoh ListView
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
Contoh Pemilih
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
Contoh TableView
Kode C# untuk halaman XAML halaman / ini