Editor kode XAML

Editor kode XAML di Visual Studio IDE mencakup semua alat yang Anda butuhkan untuk membuat aplikasi WPF dan UWP untuk platform Windows, dan untuk Xamarin.Forms atau .NET MAUI. Artikel ini menguraikan peran yang dimainkan editor kode saat Anda mengembangkan aplikasi berbasis XAML, dan fitur yang unik untuk editor kode XAML di Visual Studio 2019.

Untuk memulai, mari kita lihat IDE (lingkungan pengembangan terintegrasi) dengan proyek WPF terbuka. Gambar berikut menunjukkan beberapa alat IDE utama yang Anda gunakan bersama dengan editor kode XAML.

Dari kiri bawah gambar searah jarum jam, alat IDE utama adalah sebagai berikut:

• Jendela editor kode XAML —subjek artikel ini—tempat Anda membuat dan mengedit kode Anda.
• Jendela XAML Designer , tempat Anda mendesain UI Anda.
• Jendela Toolbox yang dapat dipasang, tempat Anda menambahkan elemen kontrol ke antarmuka pengguna Anda.
• Tombol Debug , tempat Anda menjalankan kode dan men-debugnya.
  (Anda juga dapat mengedit kode secara real time saat men-debug dengan XAML Hot Reload.)
• Jendela Penjelajah Solusi , tempat Anda mengelola file, proyek, dan solusi.
• Jendela Properti , tempat Anda mengubah tampilan UI Anda dan cara kerja kontrol UI.

Untuk melanjutkan, mari kita pelajari lebih lanjut tentang editor kode XAML.

Antarmuka pengguna editor kode XAML

Sementara jendela editor kode untuk aplikasi XAML berbagi beberapa elemen UI (antarmuka pengguna) yang juga muncul di IDE standar kami, ini juga mencakup beberapa fitur unik yang membuat pengembangan aplikasi XAML lebih mudah.

Berikut adalah lihat jendela editor kode XAML itu sendiri.

Selanjutnya, mari kita lihat fungsi masing-masing elemen UI di editor kode.

Baris pertama

Di baris pertama di bagian atas jendela kode XAML, di sebelah kiri, ada tab Desain , tombol Tukar Panel , tab XAML , dan tombol Pop Out XAML .

Berikut cara kerjanya:

• Tab Desain mengubah fokus dari editor kode XAML ke Perancang XAML.
• Tombol Tukar Panel membalikkan lokasi Perancang XAML dan editor kode XAML di IDE.
• Tab XAML mengubah fokus kembali ke editor kode XAML.
• Tombol Pop Out XAML membuat jendela editor kode XAML terpisah yang berada di luar IDE.

Melanjutkan di sebelah kanan, ada tombol Pisahkan Vertikal, tombol Pemisahan Horizontal, dan tombol Ciutkan Panel.

Berikut cara kerjanya:

• Tombol Pemisahan Vertikal mengubah lokasi Perancang XAML dan editor kode XAML di IDE dari perataan horizontal ke perataan vertikal.
• Tombol Pisahkan Horizontal mengubah lokasi Perancang XAML dan editor kode XAML di IDE dari perataan vertikal ke perataan horizontal.
• Tombol Ciutkan Panel memungkinkan Anda menciutkan apa yang ada di panel bawah, baik itu editor kode atau Perancang. (Untuk memulihkan panel bawah, pilih lagi tombol yang sama, yang sekarang diberi nama tombol Perluas Panel .)

Baris kedua

Di baris kedua di bagian atas jendela kode XAML, ada dua daftar dropdown Jendela. Namun, jika Anda melihat Tooltip untuk elemen UI ini, itu lebih mengidentifikasinya sebagai "Element: Window" dan "Member: Window".

Daftar dropdown dari Jendela memiliki fungsi yang berbeda, sebagai berikut:

• Elemen: Jendela di sebelah kiri membantu Anda melihat dan menavigasi ke elemen saudara atau induk.

  Secara khusus, ini menunjukkan tampilan seperti kerangka yang mengungkapkan struktur tag kode Anda. Saat Anda memilih dari daftar, fokus Anda di editor kode diposisikan ke baris kode yang menyertakan elemen yang Anda pilih.

  

• Member: Jendela di sebelah kanan membantu Anda menampilkan dan menavigasi ke atribut atau elemen anak.

  Secara khusus, ini menunjukkan kepada Anda daftar properti dalam kode Anda. Saat Anda memilih dari daftar, fokus Anda di editor kode langsung berpindah ke baris kode yang menyertakan properti yang Anda pilih.

  

Panel tengah, editor kode

Panel tengah adalah bagian "kode" dari editor kode XAML. Ini termasuk sebagian besar fitur yang Anda temukan di editor kode IDE. Kami akan menyentuh beberapa fitur IDE universal yang dapat membantu Anda mengembangkan kode XAML Anda. Kami juga akan menyoroti fitur yang khusus untuk XAML dalam IDE.

Tindakan Cepat

Anda dapat menggunakan Tindakan Cepat untuk merefaktor, menghasilkan, atau memodifikasi kode dengan satu tindakan.

Misalnya, satu tugas berguna yang dapat Anda lakukan dengan menggunakan Tindakan Cepat adalah Menghapus penggunaan yang tidak perlu dari kode C# di tab MainWindow.xaml.cs .

Berikut caranya:

1. Arahkan mouse ke atas pernyataan penggunaan, pilih ikon bola lampu, lalu pilih Hapus Penggunaan yang Tidak Perlu dari daftar drop-down.

   

2. Pilih apakah Anda ingin memperbaiki semua kemunculan dalam Dokumen, Proyek, atau Solusi.

3. Lihat dialog Pratinjau , lalu pilih Terapkan.

Anda juga dapat mengakses fitur ini dari bilah menu. Untuk melakukannya, pilih Edit>IntelliSense>Hapus dan Urutkan Penggunaan.

Untuk informasi selengkapnya tentang pengaturan usings, lihat halaman Sortir usings. Untuk informasi selengkapnya tentang IntelliSense, lihat halaman IntelliSense di Visual Studio . Dan, untuk informasi selengkapnya tentang beberapa cara umum pengembang menggunakan Tindakan Cepat, lihat halaman Tindakan Cepat Umum .

Pelacakan perubahan

Warna margin kiri memungkinkan Anda melacak perubahan yang telah Anda buat dalam file. Berikut adalah bagaimana warna terkait dengan tindakan yang Anda ambil:

• Perubahan yang Anda buat sejak file dibuka tetapi tidak disimpan ditandai oleh bilah kuning di margin kiri (dikenal sebagai margin pilihan).

  

• Setelah Anda menyimpan perubahan (tetapi sebelum menutup file), bilah akan berubah menjadi hijau.

  

Anda bisa menonaktifkan dan mengaktifkan fitur ini di panelOpsi>. Perluas bagian Semua Pengaturan>Editor Teks>Umum, lalu pilih atau kosongkan kotak centang Lacak perubahan.

Untuk informasi selengkapnya tentang pelacakan perubahan—untuk menyertakan garis bergelombang (juga dikenal sebagai "berlekuk") yang muncul di bawah string kode—lihat bagian Fitur editor dari halaman editor Fitur Visual Studio Code .

Menu kontekstual klik kanan

Saat Mengedit kode di editor kode XAML, ada beberapa fitur yang dapat Anda akses dengan menggunakan menu konteks klik kanan. Sebagian besar fitur ini tersedia secara universal di Visual Studio IDE, sementara beberapa khusus untuk menggunakan editor kode bersama dengan jendela Desain.

Berikut adalah apa yang dilakukan setiap fitur dan bagaimana fitur tersebut berguna:

• Lihat Kode - Membuka jendela kode bahasa pemrograman, yang biasanya ditab di samping tampilan default yang menyertakan jendela Desain dan editor kode XAML.
• View Designer - Membuka tampilan default yang menyertakan jendela Desain dan editor kode XAML. (Jika Anda sudah berada dalam tampilan default, itu tidak melakukan apa-apa.)
• Tindakan Cepat dan Refaktorisasi - Refaktorisasi, membuat, atau mengubah kode dengan satu tindakan. Saat mengarahkan mouse ke atas kode, Anda akan melihat ikon bola lampu saat tindakan cepat atau pemfaktoran ulang tersedia.
  Lihat juga: Tindakan Cepat dan Kode refaktor.
• Ubah nama... - Mengganti nama namespace saja. Jika Anda tidak memiliki namespace untuk diubah, Anda menerima pesan kesalahan yang mengatakan "Hanya awalan namespace yang dapat diganti namanya."
• Hapus dan Urutkan Namespace - Menghapus namespace yang tidak digunakan lalu mengurutkan namespace yang tersisa.
• Definisi Intip - Mempratinjau definisi jenis tanpa meninggalkan lokasi Anda saat ini di editor.
  Lihat juga: Tinjau Definisi dan Lihat dan edit kode menggunakan Tinjau Definisi.
• Buka Definisi - Menavigasi ke sumber jenis atau anggota, dan membuka hasilnya di tab baru.
  Lihat juga: Buka Definisi.
• Kelilingi dengan... - Gunakan cuplikan kode kelilingi-dengan, yang diletakkan mengelilingi blok kode yang dipilih.
  Lihat juga: Cuplikan perluasan dan cuplikan dengan pembungkus.
• Sisipkan Cuplikan - Menyisipkan cuplikan kode di lokasi kursor.
• Potong - Mudah dimengerti
• Salin - Penjelasan mandiri
• Tempel - Penjelasan mandiri
• Penguraian - Perluas dan ciutkan bagian kode.
  Lihat juga: Menguraikan.
• Kontrol Sumber - Lihat riwayat kontribusi kode ke repositori sumber terbuka.

Panel tengah, bilah gulir

Bilah gulir memiliki lebih banyak fungsi daripada sekadar menggulir kode Anda. Anda juga dapat menggunakannya untuk membuka panel editor kode lain. Dan, Anda dapat menggunakan bilah gulir untuk membantu Anda membuat kode lebih efisien dengan menambahkan anotasi ke dalamnya, atau dengan menggunakan mode tampilan yang berbeda.

Memisahkan jendela kode

Di bilah gulir editor kode, ada tombol Pisahkan di kanan atas. Saat Anda memilihnya, Anda dapat membuka panel editor kode lain. Ini berguna karena beroperasi secara independen satu sama lain, sehingga Anda dapat menggunakannya untuk mengerjakan kode di lokasi yang berbeda.

Untuk informasi selengkapnya tentang cara membagi jendela editor, lihat halaman Kelola jendela editor .

Menggunakan anotasi atau mode peta

Anda juga dapat mengubah tampilan bilah gulir dan fitur lain yang ada di dalamnya. Misalnya, banyak orang suka menyertakan anotasi di bilah gulir, yang memberikan isyarat visual seperti perubahan kode, titik henti, marka buku, kesalahan, dan posisi tanda sisipan.

Yang lain menghargai menggunakan mode peta, yang menampilkan baris kode dalam miniatur pada bilah gulir. Pengembang yang bekerja dengan file kode besar mungkin menemukan bahwa mode peta melacak baris kode lebih efektif daripada bilah gulir bawaan.

Untuk informasi selengkapnya tentang cara mengubah pengaturan default bilah gulir, lihat halaman Kustomisasi bilah gulir .

Fitur khusus XAML

Sebagian besar fitur berikut tersedia secara universal di Visual Studio IDE, namun ada dimensi tambahan ke beberapa di antaranya yang membuat pengkodan lebih mudah bagi pengembang XAML.

Cuplikan kode XAML

Cuplikan kode adalah blok kecil kode yang dapat digunakan kembali yang dapat Anda sisipkan ke dalam file kode dengan menggunakan perintah menu konteks klik kanan Sisipkan cuplikan atau kombinasi pintasan keyboard (Ctrl+K, Ctrl+X). IntelliSense sekarang mendukung menampilkan cuplikan XAML, yang berfungsi untuk cuplikan bawaan dan cuplikan kustom apa pun yang Anda tambahkan secara manual. Beberapa cuplikan XAML bawaan termasuk #region, Column definition, Row definition, Setter, dan Tag.

Untuk informasi selengkapnya, lihat cuplikan kode dan halaman cuplikan kode C# .

Dukungan XAML #region

Di Visual Studio, dukungan #region tersedia untuk pengembang XAML di WPF, UWP, Xamarin.Forms, dan .NET MAUI. Di Visual Studio 2019, kami terus melakukan peningkatan inkremental pada dukungan #region. Misalnya, dalam versi 16.4 dan yang lebih baru, opsi #region ditampilkan saat Anda mulai mengetik <!.

Anda dapat menggunakan region saat ingin mengelompokkan bagian kode yang juga ingin Anda perluas atau lipat.

    <!--#region NameOfRegion-->
    Your code is here
    <!--#endregion-->

Untuk informasi selengkapnya tentang wilayah, lihat halaman #region (Referensi C#). Dan untuk informasi selengkapnya tentang memperluas dan menciutkan bagian kode, lihat halaman Kerangka .

Komentar XAML

Pengembang sering lebih suka mendokumentasikan kode mereka dengan menggunakan komentar. Anda dapat menambahkan komentar ke kode XAML yang ada di tab MainWindow.xaml dengan cara berikut:

• Masukkan <!-- sebelum komentar lalu tambahkan --> setelah komentar.

• Masukkan <! lalu pilih !-- dari daftar opsi.

  

• Pilih kode yang ingin Anda kelilingi dengan komentar lalu pilih tombol Komentar dari toolbar di IDE. Untuk membalikkan tindakan, pilih tombol Batalkan Komentar .

  

• Pilih kode yang ingin Anda kelilingi dengan komentar, lalu tekan Ctrl+K, Ctrl+C. Untuk menghapus komentar kode yang dipilih, tekan Ctrl+K, Ctrl+U.

Untuk informasi selengkapnya tentang cara menggunakan komentar di kode C# yang ada di tab MainWindow.xaml.cs , lihat halaman Komentar dokumentasi .

Bola lampu XAML

Ikon bola lampu yang muncul di kode XAML Anda adalah bagian dari Tindakan Cepat yang dapat Anda gunakan untuk merefaktor, menghasilkan, atau memodifikasi kode.

Berikut adalah beberapa contoh bagaimana mereka dapat menguntungkan pengalaman pengkodatan XAML Anda:

• Hapus namespace yang tidak perlu. Di editor kode XAML, namespace yang tidak perlu digaris bawahi dengan garis biru bergelombang. Jika Anda mengarahkan kursor ke atas penggunaan yang tidak perlu, bola lampu akan muncul. Saat Anda memilih opsi Hapus Namespace yang Tidak Perlu dari daftar drop-down, Anda dapat melihat pratinjau dari elemen yang dapat dihapus.

  

• Ganti nama namespace. Fitur ini, tersedia dari menu konteks klik kanan setelah Anda menyoroti namespace, memudahkan untuk mengubah beberapa instance pengaturan sekaligus. Anda juga dapat mengakses fitur ini dengan menggunakan bilah menu, Edit>Ganti Nama>, atau dengan menekan Ctrl+R, lalu Ctrl+R lagi.

  

Untuk informasi selengkapnya, lihat halaman Mengganti nama simbol kode refaktor .

XAML Bersyarat untuk UWP

XAML bersyarat menyediakan cara untuk menggunakan metode ApiInformation.IsApiContractPresent dalam markup XAML. Ini memungkinkan Anda mengatur properti dan membuat instans objek dalam markup berdasarkan keberadaan API tanpa perlu menggunakan kode di belakang.

Untuk informasi selengkapnya, lihat halaman XAML Kondisional, dan halaman Kontrol Host UWP XAML di aplikasi desktop (Kepulauan XAML).

Visualizer Struktur XAML

Fitur Structure Visualizer di editor kode menampilkan garis pemandu struktur, yang merupakan garis putus-putus vertikal yang menunjukkan pasangan elemen tag terbuka dan tertutup yang sesuai dalam kode Anda. Garis vertikal ini memudahkan untuk melihat di mana blok logis dimulai dan berakhir.

Untuk informasi selengkapnya, lihat halaman Kode Navigasi.

IntelliCode untuk XAML

Saat Anda menambahkan tag XAML ke kode Anda, Anda biasanya mulai dengan tanda kurung <sudut kiri . Saat Anda mengetik kurung sudut tersebut, menu IntelliCode muncul yang mencantumkan beberapa tag XAML yang lebih populer. Pilih salah satu yang ingin Anda tambahkan dengan cepat ke kode Anda.

Untuk informasi selengkapnya, lihat halaman Gambaran Umum IntelliCode .

Pengaturan

Untuk informasi selengkapnya tentang semua pengaturan di Visual Studio IDE, lihat halaman Fitur editor kode .

Pengaturan opsional XAML

Anda dapat menggunakan panel Opsi untuk mengubah pengaturan default untuk editor kode XAML. Untuk menampilkan pengaturan, buka panelOpsi> dan perluas bagian SemuaBahasa>Pengaturan>XAML.

Nota

Anda juga bisa menggunakan pintasan keyboard untuk mengakses bagian dan pengaturan di panel Opsi . Pilih Ctrl+Q untuk mencari IDE, ketik opsi, lalu tekan Enter. Untuk mencari daftar opsi, tekan Ctrl+E, ketik bahasa, tekan Enter, ketik xaml, lalu tekan Enter.

Untuk informasi selengkapnya tentang pintasan keyboard, lihat halaman Tips pintasan untuk Visual Studio .

Opsi editor teks universal

Tiga bagian pertama dari Opsi XAML menyediakan pengaturan yang universal untuk semua bahasa pemrograman yang didukung Visual Studio IDE. Untuk mempelajari selengkapnya tentang opsi ini dan cara menggunakannya, lihat informasi tertaut dalam tabel berikut ini.

Section	Lokasi
General	Panel Opsi: Semua Pengaturan, Bahasa, Default, Umum
Bilah gulir	Opsi, Semua Pengaturan, Bahasa, Pengaturan Awal, Bilah Gulir
Tab	Opsi, Semua Pengaturan, Bahasa, Default, Tab

Opsi editor teks khusus XAML

Bagian berikut dari Opsi XAML khusus untuk XAML. Pengaturan ini dapat meningkatkan pengalaman pengeditan saat Anda mengembangkan aplikasi berbasis XAML. Untuk mempelajari selengkapnya tentang opsi ini dan cara menggunakannya, lihat informasi tertaut dalam tabel berikut ini.

Section	Lokasi
Formatting	Panel Opsi: Semua Pengaturan, Bahasa, XAML, Pemformatan
Miscellaneous	Opsi, Semua Pengaturan, Bahasa, XAML, Lain-lain

Petunjuk / Saran

Pengaturan nama metode penanganan aktivitas Kapitalisasi di bagian Lain-lain sangat berguna bagi pengembang XAML. Pengaturan ini nonaktif secara default karena baru, tetapi kami sarankan Anda mengaturnya ke aktif untuk mendukung casing yang tepat dalam kode Anda.

Langkah selanjutnya

Untuk mempelajari selengkapnya tentang cara mengedit kode secara real time saat menjalankan aplikasi dalam mode debug, lihat halaman XAML Hot Reload .

Lihat juga

• Fitur editor Visual Studio Code
• XAML di aplikasi UWP
• XAML pada aplikasi Xamarin.Forms
• XAML di aplikasi .NET MAUI