XAML Studio: Panduan lengkap untuk membuat prototaip antara muka XAML dalam Windows

Informatec Digital » Sumber » XAML Studio: Panduan lengkap untuk membuat prototaip antara muka XAML dalam Windows

Jika anda menggunakan XAML untuk mencipta antara muka dalam Windows , anda mungkin pernah menghadapi masalah dengan pereka Visual Studio, masa penyusunan yang tidak berkesudahan atau ralat pengikatan data yang mustahil untuk dikesan. Di sinilah XAML Studio memainkan peranan, sebuah aplikasi yang direka bentuk tepat untuk membolehkan anda menguji, menyahpepijat dan bereksperimen dengan XAML dengan cepat dan dengan kurang geseran.

Sepanjang artikel ini, kita akan melihat secara terperinci tentang apa itu XAML Studio, bagaimana ia membantu anda membuat prototaip antara muka WinUI dan UWP dalam beberapa minit, alat yang ditawarkannya untuk penyahpepijatan pautan, mengurus data ujian, menavigasi pokok visual dan banyak lagi. Anda juga akan melihat cara memuat turunnya dari Microsoft Store, apakah keperluannya jika anda ingin mengkompilnya daripada kod sumber dan bagaimana semua ini sesuai dengan konteks semasa pembangun yang agak muak dengan pereka Visual Studio.

Apakah XAML Studio dan untuk siapa ia?

XAML Studio ialah aplikasi Windows yang tertumpu pada pembangunan XAML , yang pada asalnya dicipta sebagai projek Microsoft Garage dan kini dikeluarkan sebagai projek sumber terbuka dalam .NET Foundation. Tujuan utamanya adalah untuk membolehkan anda menulis XAML, melihatnya berfungsi serta-merta dan berinteraksi dengan antara muka seolah-olah ia adalah sebahagian daripada aplikasi anda sendiri.

Ia khususnya ditujukan kepada pembangun yang menggunakan aplikasi WinUI XAML dan UWP , walaupun ia juga sangat berguna jika anda berasal dari WPF dan ingin bereksperimen dengan konsep reka bentuk, gaya, templat dan keadaan visual Fluent moden tanpa perlu membina penyelesaian lengkap setiap kali.

Tidak seperti Visual Studio, yang lebih menjurus ke arah kitaran pembangunan yang lengkap, XAML Studio bertindak sebagai makmal idea untuk lapisan visual : anda menyalin fragmen XAML, menampalnya, melaraskannya, melihat hasilnya serta-merta, bermain dengan data, menyemak pengikatan dan apabila anda berpuas hati, anda membawa kod tersebut ke projek sebenar anda.

Tambahan pula, sebagai projek sumber terbuka, evolusinya terbuka kepada komuniti: mana-mana pembangun boleh menyemak kod, mencadangkan perubahan , mengemukakan penambahbaikan dan mengambil bahagian dalam perbincangan ciri baharu melalui repositori awam.

Ciri-ciri utama XAML Studio untuk antara muka prototaip

Salah satu kekuatan XAML Studio ialah ia menggabungkan satu set alat dalam satu aplikasi yang direka untuk menguji reka bentuk, mencipta susun atur skrin dan menyahpepijat pautan dengan masa henti yang minimum. Ia bukan sekadar pemapar XAML, tetapi persekitaran interaktif untuk iterasi pantas pada UI anda.

Antara keupayaannya yang paling penting ialah penyuntingan langsung: anda boleh menulis atau mengubah suai kod XAML dalam editor dan serta-merta melihat pratonton yang berfungsi sepenuhnya . Tetingkap pratonton ini membolehkan interaksi sebenar: menekan butang, menukar keadaan, menggerakkan gelangsar atau menguji tingkah laku seperti yang anda lakukan dalam aplikasi akhir.

Satu lagi ciri menarik ialah keupayaan untuk bereksperimen dengan navigasi XAML menggunakan jejak serbuk roti. Ini membolehkan anda bergerak dengan mudah melalui struktur kompleks, melihat dengan tepat di mana anda sedang bekerja dalam pokok dan mencari elemen yang ingin anda laraskan dengan cepat.

Di samping itu, XAML Studio merangkumi satu set pintasan dan pilihan pratonton pantas: muat semula kandungan, aktifkan grid penjajaran, gunakan keratan atau tukar tema, semuanya daripada menu akses pantas yang direka untuk menyelaraskan kitaran percubaan dan ralat.

Interaksi penyuntingan dan pratonton langsung

Asas XAML Studio ialah sistem Live Edit and Interaction , ciri penyuntingan langsung yang menghapuskan keperluan untuk menyusun keseluruhan penyelesaian setiap kali anda menukar warna, jarak atau templat. Anda menulis kod, menyimpan atau membiarkannya tidak disimpan dan antara muka akan disegarkan semula supaya anda dapat melihat hasilnya serta-merta.

Pratonton ini interaktif sepenuhnya, bermakna anda boleh menguji tingkah laku antara muka dunia sebenar : menavigasi kawalan, mencetuskan peristiwa dan melihat bagaimana elemen bertindak apabila gaya, pencetus dan keadaan visual digabungkan. Ia menyelamatkan nyawa untuk prototaip kerana ia membantu anda memutuskan dengan lebih cepat apa yang kelihatan baik dan apa yang tidak.

Tambahan pula, XAML Studio menyertakan panduan penjajaran pada permukaan reka bentuk , menjadikannya mudah untuk meletakkan elemen secara konsisten dan mengesan salah penjajaran yang mungkin tidak disedari. Ini membolehkan anda mencapai susun atur yang lebih bersih tanpa perlu membuat pelarasan margin buta yang tidak terkira banyaknya.

Dalam sistem reka bentuk yang kompleks, di mana WinUI dan Fluent menawarkan banyak kemungkinan dengan bayang-bayang, tepi bulat dan susun atur adaptif, mempunyai pratonton interaktif yang bersepadu dengan baik membantu anda mengelakkan banyak kekecewaan yang biasa berlaku semasa penalaan halus dalam pengeluaran.

Menyahpepijat pengikatan dan meneroka pokok visual

Salah satu masalah sebenar dalam WPF, UWP atau WinUI ialah ralat pengikatan data senyap . Apabila pengikatan gagal, anda selalunya hanya melihat nilai kosong dan sedikit sahaja, menjadikannya sukar untuk memahami apa yang berlaku. XAML Studio menyertakan Penyahpepijat Pengikat yang direka untuk menjelaskan masalah seperti ini.

Dengan Penyahpepijat Pengikatan, anda boleh menyemak secara visual bagaimana sifat model anda bersambung dengan kawalan dalam antara muka. Alat ini memaparkan status setiap pengikatan, nilai terakhir yang digunakan dan membantu anda mengenal pasti pengikatan yang gagal dengan cepat dan mengapa. Untuk mockup kompleks dengan jumlah data yang besar, ini menjimatkan banyak masa.

Berkaitan dengan ini, XAML Studio mengintegrasikan penjelajah pokok visual dan keadaan visual , yang boleh diakses daripada panel Properties. Penjelajah pokok visual menunjukkan hierarki kawalan dan elemen lengkap yang membentuk skrin, membolehkan anda memilih mana-mana nod dan melihat sifat, gaya dan perhubungannya.

Sementara itu, peneroka keadaan visual memudahkan untuk melihat dan bertukar antara keadaan paparan yang berbeza (contohnya, normal, runcing, ditekan, dinyahdayakan), yang penting apabila menggunakan kawalan tersuai atau templat lanjutan. Ini membolehkan anda menguji dengan cepat bagaimana setiap keadaan mempengaruhi reka bentuk anda tanpa perlu memaksa setiap situasi secara manual dalam aplikasi sebenar.

Pengurusan data dengan Editor Konteks Data

Menguji antara muka tanpa data sebenar adalah seperti mereka bentuk secara membuta tuli. Itulah sebabnya XAML Studio menyertakan Editor Konteks Data , alat yang membolehkan anda menentukan konteks data paparan anda dengan mudah untuk mengisinya dengan maklumat ujian.

Daripada editor ini, anda boleh menyambungkan UI anda kepada sumber data statik dan dinamik: contohnya, muatkan JSON daripada fail setempat atau API REST dan gunakannya sebagai DataContext untuk kawalan anda. Ini membolehkan anda melihat bagaimana susun atur bertindak balas dengan teks panjang, koleksi besar atau nilai sempadan, yang penting untuk reka bentuk yang mantap.

Keupayaan untuk mencampurkan XAML dengan data ujian ini, tanpa perlu menyediakan keseluruhan infrastruktur aplikasi anda, membolehkan anda melakukan iterasi dengan lebih pantas pada penampilan visual dan pengedaran maklumat, dan menjimatkan anda daripada menyediakan projek sampel ad hoc hanya untuk melihat bagaimana borang kelihatan dengan data sebenar.

XAML Studio juga boleh memulihkan dokumen dan konteks datanya apabila anda membuka semula aplikasi, terima kasih kepada sistem simpan automatiknya, yang menjimatkan anda daripada perlu mengkonfigurasi semula sumber data setiap kali anda ingin terus menguji reka bentuk tertentu.

Alatan produktiviti: IntelliSense, autosave dan banyak lagi

Selain ciri visual semata-mata, XAML Studio mengintegrasikan beberapa alat produktiviti yang memudahkan kerja harian anda semasa menulis XAML secara intensif . Salah satu yang paling berguna ialah sokongan IntelliSense, yang mencadangkan sifat, jenis, nama kawalan dan ruang nama semasa anda menaip.

IntelliSense ini bukan sahaja mempercepatkan penulisan kod, tetapi juga membantu mencegah kesalahan taip dalam pengikatan, laluan dan atribut , terutamanya dalam struktur gaya, templat atau sumber kongsi yang panjang. Jika anda sudah biasa dengan IntelliSense dalam Visual Studio, anda akan berasa seperti di rumah sendiri.

Satu lagi ciri yang sangat praktikal ialah penyimpanan dan pemulihan dokumen secara automatik . XAML Studio boleh menyimpan kerja anda secara automatik dan, apabila anda membuka semula aplikasi, mendapatkan semula tab dan dokumen yang anda gunakan, supaya anda boleh meneruskan tepat di tempat anda berhenti tanpa perlu membuka fail satu persatu.

Antara muka ini merangkumi Kotak Alat Dokumentasi yang berfungsi sebagai jalan pintas kepada contoh, bantuan dan rujukan untuk kawalan dan sifat. Ini membolehkan anda merujuk dokumentasi tanpa meninggalkan alat ini , yang amat mudah apabila menguji API yang kurang dikenali atau sifat khusus WinUI.

Alat bantu reka bentuk: UI, panduan dan ruang nama yang lancar

Versi terkini projek ini telah menampilkan antara muka yang diubah suai berdasarkan Fluent UI , sistem reka bentuk moden Microsoft. Kemas kini ini ketara dalam penampilan visual alat ini dan juga cara ia mengintegrasikan kawalan, tema dan susun atur semasa.

Untuk membantu anda dengan susun atur, XAML Studio menyertakan panduan penjajaran dan grid pada permukaan pratonton. Panduan ini memudahkan penjajaran margin, padding dan susun atur, dan amat berguna apabila anda cuba meniru reka bentuk piksel yang sempurna atau apabila anda ingin memastikan elemen dijajarkan dengan betul tanpa perlu mengukur semuanya secara manual.

Satu lagi bidang di mana alat ini membantu adalah dalam mengurus ruang nama XAML. Dengan Pembantu Ruang Namanya, anda boleh menambah dan membetulkan xmln dengan lebih cekap, mengelakkan masalah biasa iaitu pengisytiharan yang tidak lengkap atau berganda yang memecahkan markup atau menghasilkan amaran yang menjengkelkan.

Penambahbaikan kecil untuk kegunaan harian juga telah digabungkan, seperti keupayaan untuk menduplikasi tab terbuka daripada menu konteks , yang sangat bagus apabila anda ingin mencuba dua variasi susun atur yang sama tanpa kehilangan versi asal anda atau perlu membuat fail baharu dari awal.

Sokongan folder dan pengurusan sumber

Salah satu perkembangan utama dalam XAML Studio ialah sokongan untuk folder dan sumber luaran . Ini bermakna anda boleh bekerja dengan satu set fail berkaitan, bukan hanya satu fail XAML terpencil.

Disebabkan ciri ini, aplikasi ini boleh mengendalikan pemuatan imej daripada folder, fail data reka bentuk dan sumber tambahan lain yang biasanya disertakan dengan antara muka sebenar. Contohnya, anda mungkin mempunyai satu set imej ujian untuk karusel, ikon untuk butang atau fail JSON yang bertindak sebagai sumber data.

Sokongan folder ini membawa XAML Studio lebih dekat dengan aliran kerja dunia sebenar, dan bukannya sekadar kotak pasir yang mudah. ​​Ia membolehkan anda menyediakan senario ujian kecil yang meniru struktur sumber aplikasi penuh , tetapi dengan sifat persekitaran yang ringan yang direka khas untuk prototaip.

Semua ini, digabungkan dengan alat pratonton, pengikatan dan navigasi yang lain, menjadikan XAML Studio pilihan yang sangat menarik bagi mereka yang ingin memperhalusi skrin mereka sebelum mengintegrasikannya ke dalam penyelesaian kelas berat.

Muat turun dari Microsoft Store dan pemasangan manual

Bagi kebanyakan pengguna, cara paling mudah untuk bermula adalah dengan memuat turun XAML Studio terus dari Microsoft Store . Ia tersedia di sana sebagai aplikasi percuma, jadi apa yang anda perlu lakukan ialah mencarinya, memasangnya dan mula bereksperimen dengan XAML dalam beberapa minit.

Versi kedai, menurut maklumat yang ada, masih berada di cawangan 1.1, manakala pembangunan paling aktif berlaku di cawangan pembangunan repositori projek. Ini penting jika anda ingin mengakses ciri terkini atau menyumbang kepada pembangunan, kerana mungkin terdapat perbezaan antara apa yang anda lihat di kedai dan apa yang ada dalam kod sumber.

Jika anda lebih suka memasangnya secara manual dari repositori, atau mengkompilnya sendiri, terdapat beberapa keperluan minimum yang berkaitan dengan Visual Studio yang harus anda ingat untuk memastikan semuanya berfungsi dengan baik.

Kompilasi XAML Studio daripada kod sumber

Jika anda ingin melangkah lebih jauh dan mengkompilasi XAML Studio daripada kod sumbernya , anda perlu menyediakan persekitaran anda dalam Visual Studio dengan komponen khusus yang ditujukan ke arah pembangunan aplikasi Windows moden.

Pertama, anda perlu memasang beban kerja pembangunan aplikasi Windows dalam Visual Studio. Beban kerja ini merangkumi semua yang berkaitan dengan aplikasi UWP, WinUI dan teknologi XAML moden yang lain pada platform Windows.

Selain itu, anda perlu memasang alat Universal Windows Platform , serta Windows SDK 17763 khusus. Tanpa SDK ini, beberapa bahagian projek mungkin tidak dapat dikompilasi dengan betul, jadi adalah dinasihatkan untuk menyemaknya dalam pemasang Visual Studio sebelum membuka penyelesaian.

Sebaik sahaja anda mempunyai semua komponen, apabila anda membuka repositori, pastikan projek yang dipanggil XAMLStudio ditanda sebagai projek permulaan dalam penyelesaian. Kemudian, tekan sahaja F5 untuk menjalankan dalam mod debug dan lancarkan aplikasi daripada persekitaran pembangunan anda sendiri.

Projek sumber terbuka, lesen dan kod tatalaku

Oleh kerana ia diterbitkan sebagai projek .NET Foundation , XAML Studio diedarkan di bawah Lesen MIT, salah satu lesen sumber terbuka yang paling permisif. Ini bermakna anda boleh menyemak, mengubah suai, menggunakan semula dan menyumbang kepada kod tersebut dengan agak bebas, selagi anda mematuhi terma atribusi yang biasa.

Repositori ini merangkumi fail NOTICE.json dengan atribusi pihak ketiga , yang sepadan dengan maklumat yang dipaparkan dalam aplikasi itu sendiri mengenai pustaka luaran yang digunakan. Jika anda bimbang tentang pematuhan lesen dalam persekitaran perusahaan, fail ini merupakan rujukan berguna untuk melihat komponen mana yang telah digabungkan.

Projek ini telah menerima pakai Kod Tatalaku Sumber Terbuka Microsoft , jadi penyertaan dalam isu, permintaan tarik balik atau perbincangan memerlukan pematuhan kepada peraturan tatalaku yang jelas: rasa hormat, profesionalisme dan toleransi sifar terhadap gangguan. Terdapat juga halaman Soalan Lazim tentang kod tatalaku dan alamat hubungan ( [email protected] ) untuk soalan atau isu.

Bagi mereka yang ingin bekerjasama secara aktif, fail CONTRIBUTING.md menerangkan cara mencadangkan perubahan, menghantar sumbangan dan melaporkan isu . Ia memperincikan cara yang disyorkan untuk bekerjasama dengan cawangan, aliran kerja semakan kod dan aspek praktikal lain untuk bekerjasama dalam projek.

Telemetri, privasi dan pengumpulan data

Seperti kebanyakan aplikasi moden yang lain, XAML Studio menyertakan mekanisme telemetri untuk mengumpul maklumat penggunaan , dengan matlamat untuk memahami ciri yang paling banyak digunakan, cara aplikasi berfungsi pada saiz dokumen yang berbeza dan jenis ralat yang paling kerap berlaku.

Berita baiknya ialah aplikasi itu sendiri menawarkan kawalan yang jelas ke atas telemetri ini: dari halaman tetapan, dalam bahagian Maklum Balas , anda boleh menukar pilihan Data Diagnostik kepada "Tidak" untuk melumpuhkan pengumpulan data daripada aplikasi yang diedarkan itu sendiri.

Perlu diingatkan bahawa, menurut maklumat projek, App Center — platform yang digunakan sebagai asas untuk telemetri — telah ditamatkan dan, pada masa ini, telemetri aktif tidak digunakan dalam versi v2 sementara penyelesaian alternatif untuk diagnostik sedang diputuskan.

Walau apa pun, Microsoft menyatakan bahawa perisian tersebut mungkin mengumpul maklumat tentang penggunaan aplikasi, yang boleh digunakan untuk menambah baik perkhidmatan dan produk . Jika anda, sebagai pembangun, menggunakan ciri yang mungkin mengumpul data pengguna akhir (contohnya, penyepaduan perkhidmatan dalam aplikasi anda sendiri), anda mesti mematuhi undang-undang yang terpakai dan memberikan notis dan dasar privasi yang sesuai, yang memautkan kepada pernyataan privasi Microsoft jika sesuai.

Jenama, logo dan penggunaan tanda dagangan

Repositori dan aplikasi itu sendiri mungkin mengandungi tanda dagangan dan logo Microsoft atau pihak ketiga yang lain. Projek ini menjelaskan bahawa penggunaan tanda dagangan ini tertakluk kepada garis panduan penjenamaan rasmi Microsoft.

Jika anda memutuskan untuk mencipta versi projek yang diubah suai atau pengedaran alternatif, anda mesti berbuat demikian dengan cara yang tidak menyebabkan kekeliruan atau mencadangkan penajaan rasmi oleh Microsoft apabila tiada hubungan sedemikian wujud. Peraturan ini amat penting jika anda mengagihkan semula binari atau mengintegrasikan bahagian projek ke dalam produk komersial.

Begitu juga, sebarang logo atau tanda dagangan pihak ketiga yang digunakan dalam kod tersebut tertakluk kepada dasar pihak ketiga tersebut, jadi adalah dinasihatkan untuk menyemak aspek-aspek ini jika anda berhasrat untuk menggunakan semula sebahagian besar aplikasi dalam projek awam anda sendiri.

Konteks: Kekecewaan dengan pereka Visual Studio dan nilai XAML Studio

Pelancaran XAML Studio sebagai projek sumber terbuka datang pada masa ramai pembangun meluahkan rasa tidak puas hati dengan pereka visual Visual Studio . Isu prestasi, ranap sistem, tingkah laku yang tidak konsisten dan kesukaran untuk menyahpepijat XAML yang kompleks merupakan aduan yang berulang.

Dalam senario ini, XAML Studio dilihat sebagai sejenis injap pelepasan: alat ringan, yang tertumpu khusus pada reka bentuk dan pengujian XAML, yang mengurangkan sedikit geseran kitaran sunting-kompilasi-jalan tradisional. Ia tidak bertujuan untuk menggantikan Visual Studio, tetapi sebaliknya untuk melengkapi kepakarannya dalam bidang yang paling merugikannya: lelaran pantas pada antara muka.

Pendekatan ini juga sejajar dengan kebimbangan teknologi pembelajaran seperti WinUI, WPF atau UWP. Bagi kebanyakan orang, gabungan fail .sln, konfigurasi kompleks dan pembungkusan ke dalam fail boleh laku boleh menjadi sangat menyusahkan, terutamanya pada permulaannya. Mempunyai alat kendiri untuk memberi tumpuan sepenuhnya pada lapisan XAML menjadikan proses pembelajaran dan eksperimen lebih lancar.

Pendek kata, XAML Studio telah menemui nichenya sebagai aplikasi yang sangat bernilai bagi mereka yang mendedikasikan sebahagian besar masa mereka untuk membina dan memperhalusi antara muka pengguna dalam ekosistem Windows, menawarkan persekitaran yang lebih tangkas dan kurang rumit untuk memanipulasi XAML setiap hari.

Bagi sesiapa yang baru bermula dengan C#, WPF, UWP atau WinUI, atau bagi mereka yang sudah beruban dalam XAML tetapi masih menghadapi masalah dengan pengujian yang perlahan dan penyahpepijatan yang mengelirukan, mempunyai alat seperti XAML Studio mewakili perubahan ketara dalam cara anda mendekati prototaip , menyahpepijat pengikatan kompleks dan mengesahkan reka bentuk sebelum mengintegrasikannya ke dalam projek besar—semuanya dengan fleksibiliti projek sumber terbuka dan ketenangan fikiran kerana dapat mengawal data yang dikongsi dan cara ia digunakan.