XAML Previewer untuk Xamarin.Forms

Artikel
03/16/2020

Lihat tata letak Anda Xamarin.Forms yang dirender saat Anda mengetik

Peringatan

XAML Previewer telah tidak digunakan lagi di Visual Studio 2019 versi 16.8 dan Visual Studio untuk Mac versi 8.8, dan digantikan oleh fitur XAML Hot Reload di Visual Studio 2019 versi 16.9 dan Visual Studio untuk Mac versi 8.9. Pelajari selengkapnya tentang XAML Hot Reload dalam dokumentasi.

Gambaran Umum

XAML Previewer menunjukkan kepada Anda bagaimana halaman XAML Anda Xamarin.Forms akan terlihat di iOS dan Android. Saat membuat perubahan pada XAML, Anda akan melihatnya langsung dipratinjau bersama kode Anda. Pemratinjau XAML tersedia di Visual Studio dan Visual Studio untuk Mac.

Memulai

Visual Studio 2019

Anda dapat membuka Pemratinjau XAML dengan mengklik panah pada panel tampilan terpisah. Jika Anda ingin mengubah perilaku tampilan terpisah default, gunakan dialog Opsi > Alat > Xamarin >Xamarin.Forms XAML Previewer. Dalam dialog ini, Anda dapat memilih tampilan dokumen default dan orientasi terpisah.

Saat Anda membuka file XAML, editor akan membuka berukuran penuh atau di samping pemratinjau, berdasarkan pengaturan yang dipilih dalam dialog Opsi > Alat > Xamarin >Xamarin.Forms XAML Previewer. Namun, pemisahan dapat diubah untuk setiap file di jendela editor.

Kontrol pratinjau XAML

Pilih apakah Anda ingin melihat kode Anda, Pemratinjau XAML, atau keduanya dengan memilih tombol ini pada panel tampilan terpisah. Tombol tengah menukar sisi mana pratinjau dan kode Anda berada:

Anda dapat mengubah apakah layar dipisahkan secara vertikal atau horizontal, atau menciutkan satu panel sama sekali:

Mengaktifkan atau menonaktifkan Pemratinjau XAML

Anda dapat menonaktifkan Pemratinjau XAML dalam dialog Alat Opsi > XamarinXamarin.Forms >XAML Previewer dengan memilih Editor XML Default sebagai Editor XAML Default Anda.> Ini juga menonaktifkan Kerangka Dokumen, Panel Properti, dan Kotak Alat XAML. Untuk mengaktifkan kembali XAML Previewer dan alat tersebut, ubah Editor XAML Default Anda menjadi Xamarin.Forms Pratinjau.

Visual Studio untuk Mac

Tombol Pratinjau ditampilkan di editor saat Anda membuka halaman XAML. Perlihatkan atau sembunyikan Pemratinjau dengan menekan tombol Pratinjau atau Pisahkan di kiri bawah jendela dokumen XAML apa pun:

Catatan

Di versi Visual Studio untuk Mac yang lebih lama, tombol Pratinjau terletak di kanan atas jendela.

Mengaktifkan atau Menonaktifkan Pemratinjau XAML

Anda dapat menonaktifkan Pemratinjau XAML dalam dialog XAML Editor > Teks Preferensi > Visual Studio > dengan memilih Editor XML Default sebagai Editor XAML Default Anda. Ini juga menonaktifkan Kerangka Dokumen, Panel Properti, dan Kotak Alat XAML. Untuk mengaktifkan kembali XAML Previewer dan alat tersebut, ubah Editor XAML Default Anda menjadi Xamarin.Forms Pratinjau.

Opsi pemratinjau XAML

Opsi di sepanjang bagian atas panel pratinjau adalah:

Android – menampilkan layar versi Android
iOS – menampilkan versi layar iOS (Catatan: Jika Anda menggunakan Visual Studio di Windows, Anda harus dipasangkan ke Mac untuk menggunakan mode ini)
Perangkat - Daftar drop-down perangkat Android atau iOS termasuk resolusi dan ukuran layar
Potret (ikon) – menggunakan orientasi potret untuk pratinjau
Lanskap (ikon) – menggunakan orientasi lanskap untuk pratinjau

Mendeteksi mode desain

Properti statis DesignMode.IsDesignModeEnabled memberi tahu Anda apakah aplikasi berjalan di pemratinjau. Dengan menggunakannya, Anda dapat menentukan kode yang hanya akan dijalankan saat aplikasi berjalan atau tidak berjalan di pemratinjau:

if (DesignMode.IsDesignModeEnabled)
{
  // Previewer only code  
}

if (!DesignMode.IsDesignModeEnabled)
{
  // Don't run in the Previewer  
}

Properti ini berguna jika Anda menginisialisasi pustaka di konstruktor halaman Anda yang gagal dijalankan pada waktu desain.

Pemecahan Masalah

Periksa masalah di bawah ini dan Forum Xamarin, jika Pratinjau tidak berfungsi.

XAML Previewer tidak menampilkan atau menunjukkan kesalahan

Mungkin perlu waktu bagi Pratinjau untuk memulai - Anda akan melihat "Initializing Render" hingga siap.
Coba tutup dan buka kembali file XAML.
Pastikan kelas Anda App memiliki konstruktor tanpa parameter.
Periksa versi Anda Xamarin.Forms - harus setidaknya Xamarin.Forms 3.6. Anda dapat memperbarui ke versi terbaru Xamarin.Forms melalui NuGet.
Periksa penginstalan JDK Anda - mempratinjau Android memerlukan setidaknya JDK 8.
Coba bungkus kelas yang diinisialisasi dalam kode C# halaman di belakang di if (!DesignMode.IsDesignModeEnabled).

Kontrol kustom tidak dirender

Coba bangun proyek Anda. Pemratinjau menunjukkan kelas dasar kontrol jika gagal merender kontrol, atau jika pembuat kontrol menolak penyajian waktu desain. Untuk informasi selengkapnya, lihat Merender Kontrol Kustom di Pemratinjau XAML.

Bagikan melalui