‫Selamat datang kembali.
‫Dan video ini, kita akan melihat lebih dekat pada Zemel dan Anda mungkin ingin memeriksanya.
‫Zemel adalah jenis bahasa XML, seperti yang Anda lihat di sini di bagian bawah.
‫Dan sebenarnya, saya akan menyeretnya lebih jauh sehingga memungkinkan kita untuk menulis UI kita sehingga kita tidak perlu
‫melanjutkan dan menyeret semua elemen ke GUI kita dan menyesuaikannya di sana.
‫Kita bisa melakukan semua itu dalam kode.
‫Sekarang, Anda mungkin mengatakan saya lebih dari seorang pria visual.
‫Saya ingin melanjutkan dan menyeret semuanya dan saya baik-baik saja dengan itu sementara Anda bisa melakukannya.
‫Tetapi Anda terbatas hanya untuk menyeretnya saja.
‫Dan dengan contoh, Anda dapat menyesuaikan banyak dan Anda dapat menyesuaikan tidak hanya hal-hal seperti pembungkus ini, tetapi Anda
‫telah melihat di video terakhir Anda dapat melakukan lebih banyak dan kita akan melihat apa itu pengikatan
‫data, apa properti atau properti ketergantungan dan seterusnya adalah, hal-hal yang dapat Anda lakukan dengan Zemel, yang
‫memungkinkan kami membuat antarmuka pengguna yang sangat hebat yang mudah dipelihara.
‫Jadi dan di sini yang bisa Anda lihat adalah jendela ini, pertama-tama.
‫Jadi secara umum apa yang Anda miliki adalah Anda memiliki tag pembuka dan Anda memiliki tag penutup.
‫Jika Anda tahu HTML, maka Anda mungkin sudah familiar dengan itu.
‫Anda memiliki kawat gigi sudut dan Anda juga menutupnya.
‫Jadi kurang dari menandatangani kata dan kemudian lebih besar dari sinus.
‫Dan Anda lihat kami memiliki hal yang sama dengan jendela dan di sini juga.
‫Kemudian satu penutupan.
‫Anda juga memiliki garis miring tepat sebelum kata.
‫Jadi ini sama untuk kisi, untuk jendela untuk hal lain.
‫Jadi jika saya ingin, misalnya, menggunakan tombol, saya dapat melanjutkan dan melakukannya.
‫Dan jika saya menggunakan tanda yang lebih besar maka secara otomatis membuat tag penutup.
‫Sekarang, yang bisa saya lakukan adalah melakukan semua penyesuaian di dalam tag pembuka.
‫Seperti yang Anda lihat di sini, Button, saya dapat melanjutkan dan misalnya, menambahkan konten ke dalamnya.
‫Jadi ada banyak properti yang berbeda, seperti yang Anda lihat.
‫Dan saya hanya akan menggunakan properti konten dan saya hanya akan menggunakan sesuatu seperti Klik saya.
‫Sekarang ada tombol ini di tengah, seperti yang Anda lihat, dan dikatakan, klik saya.
‫Tentu saja, kami tidak memiliki tinggi badan.
‫Kami tidak memiliki dengan semua jenis properti belum disetel.
‫Tapi katakanlah saya ingin tombol ini memiliki tinggi 50 piksel dan kemudian saya ingin lebarnya 100 piksel, seperti yang Anda lihat.
‫Sekarang, ini adalah tombol saya yang telah saya buat.
‫Tentu saja, saya bisa menyeretnya, tetapi melakukan contoh cukup berguna.
‫Dan sekarang apa?
‫Sesuatu yang belum saya sentuh terlalu banyak dan yang tidak akan diperlukan sampai nanti dalam
‫kursus.
‫Tetapi secara umum yang dapat Anda lihat di sini adalah X dan L dan S yang merupakan singkatan dari, misalnya, namespace.
‫Dan Zemel adalah singkatan dari Extensible Application Markup Language.
‫Jadi izinkan saya menambahkannya di sini.
‫Mari tambahkan komentar.
‫Saya akan menggunakan komentar seperti itu.
‫Seperti yang Anda lihat, ini Greeno dan ini cukup banyak komentar.
‫Jadi saya bisa menulis sesuatu di sini, seperti Zemel adalah bahasa
‫markup aplikasi yang dapat diperluas.
‫Baiklah.
‫Sekarang, tombolnya, seperti yang Anda lihat, ada di sini.
‫Dan sekarang mari kita lanjutkan dan lakukan beberapa hal lagi dengan tombol.
‫Jadi mari kita buat beberapa tombol tambahan.
‫Silakan dan buat tombol lain.
‫OK, saya harap Anda mencobanya, cukup gunakan nama tombol di sini atau kata kuncinya lalu lanjutkan dan buat
‫tombol tambahan.
‫Sekarang, Anda mungkin bertanya-tanya, oh --, posisinya tidak benar.
‫Jadi saya memiliki tombol ini dan memiliki konten dengan.
‫Hai, yang di sana.
‫Sekarang, mengapa di mana tombol klik saya ini sekarang?
‫Nah, itu di dalam grid dan menghilang karena kita menggunakan grid sehingga tombol tidak muncul di atas satu
‫sama lain dan seterusnya.
‫Jadi jika Anda mencobanya, Anda telah melihatnya.
‫Dan kita akan melihat ke dalam grid nanti juga.
‫Tapi aku hanya ingin menunjukkannya padamu untuk saat ini.
‫Baiklah.
‫Jadi mari kita singkirkan tombol itu lagi.
‫Sekarang kita memiliki tombol klik saya ini dan mari kita jalankan aplikasinya sehingga kita
‫dapat melihat bagaimana tampilannya sebenarnya dalam kehidupan nyata dan bagaimana semua ini dapat membuat hidup kita indah hanya dengan mengkliknya.
‫Jadi, seperti yang Anda lihat, saya dapat mengarahkan kursor ke atasnya dan itu mengubah warnanya dan saya
‫dapat mengkliknya dan itu membuat animasi klik kecil ini dan hanya itu.
‫Tapi tidak ada yang terjadi ketika Anda mengkliknya.
‫Dan ada beberapa cara untuk menerapkan fungsi klik.
‫Dan itu akan kita lakukan nanti.
‫Benar.
‫Jadi begitulah cara kita membuat tombol pada contoh.
‫Sekarang, ada banyak elemen tambahan yang bisa kita akses di sini atau properti.
‫Misalnya, kita dapat mengakses properti ukuran font dan meningkatkan ukuran font menjadi, katakanlah, 32.
‫Jadi sekarang tombolnya tidak selebar teks, jadi mari kita sesuaikan lebarnya.
‫Jadi sekarang baik-baik saja.
‫Sekali lagi, kita dapat melihat seluruh teks tombol, tetapi ketika Anda bermain-main dengan ukuran font
‫dan semua elemen itu, Anda harus berhati-hati agar tetap pas.
‫Sekarang, yang juga dapat Anda lakukan adalah, alih-alih menambahkan konten di sini ke properti konten,
‫Anda cukup menambahkan di dalam teks tombol.
‫Jadi di sini saya akan mengatakan sesuatu seperti, klik saya.
‫Dan seperti yang Anda lihat, itu ada di sana.
‫Jadi ini adalah konten di antara tag di mana Anda memiliki konten Anda.
‫Jadi itu salah satu cara untuk melakukannya.
‫Yang lainnya adalah cukup menggunakan properti konten di sini dan menetapkan teks seperti ini, seperti yang telah kita lihat
‫sebelumnya.
‫Sekarang, tombol tag penutup ini tidak diperlukan jika Anda langsung menutup tombol seperti ini sehingga Anda dapat menutupnya dengan
‫cara yang lebih singkat seperti itu sehingga Anda tidak memerlukan tombol tag penutup.
‫Dan cara lain untuk mendesain tombol adalah sebagai berikut.
‫Jadi jika Anda melihat sesuatu seperti itu, itu juga tidak apa-apa.
‫Jadi Anda membuat tag tombol penutup dan pembuka.
‫Dan di sini Anda memiliki titik tombol dan kemudian Anda dapat melanjutkan dan menyesuaikan semua properti berbeda yang Anda
‫inginkan.
‫Jadi seperti yang Anda lihat, ada banyak properti berbeda yang bisa kita akses,
‫misalnya ukuran font seperti itu.
‫Jadi saya dapat mengatur ukuran font menjadi 72 seperti itu, misalnya, dan properti tombol lain yang ingin saya sesuaikan karena katakanlah
‫konten sehingga saya dapat melanjutkan dan hanya konten ke tinggi di sana.
‫Jadi sekarang Anda melihat ada tombol besar ini dengan ukuran font 72 dan bertuliskan hai.
‫Jadi itu pendekatan nomor dua.
‫Dan bahkan ada hal lain yang dapat Anda lakukan.
‫Jadi mari kita sesuaikan tombol itu lebih jauh.
‫Jadi katakanlah sebagai konten, saya tidak ingin hanya teks hai di sana.
‫Saya ingin melangkah lebih jauh.
‫Saya ingin menambahkan panel bungkus.
‫Sekarang, yang dilakukan panel adalah membungkus semua kontrol atau elemennya di samping satu sama lain dari kiri
‫ke kanan.
‫Jadi elemen pertama akan menjadi, katakanlah, sebuah blok teks.
‫Dan kita telah melihat blok teks apa yang merupakan teks sederhana.
‫Dan yang satu ini akan mengatakan multi.
‫Sekarang, saya membutuhkan blok teks lain dan yang ketiga.
‫Jadi yang mengatakan beberapa, tiga kali.
‫Tapi sekarang yang bisa saya lakukan adalah menyesuaikan warna setiap aspek.
‫Jadi untuk setiap blok teks.
‫Jadi katakanlah saya mengubahnya menjadi biru, maka ini memiliki latar depan.
‫Jadi foreground adalah warna untuk warna foreground dan yang ini akan menjadi merah.
‫Dan akhirnya, blok teks terakhir saya akan memiliki latar depan putih.
‫Dan sekarang alih-alih multi, multi, multi, itu adalah tombol multi warna.
‫Dan sekarang mungkin kita ingin sedikit menyesuaikan ukuran font, mari kita perkecil juga tombol pertama, seperti
‫yang Anda lihat, itu tersembunyi karena grid hanya menampilkan elemen terakhir jika mereka tidak ditempatkan
‫di grid yang tepat struktur, yang akan kita lihat nanti.
‫Tapi mari kita singkirkan tombol pertama yang kita miliki.
‫Dan sekarang mari kita juga mengatur ukuran tombol.
‫Jadi mari kita lanjutkan dan gunakan tombol yang akan digunakan, katakanlah dua ratus.
‫Dan tinggi ketiga tombol, yang akan menjadi 100.
‫Dan seperti itu, jadi begitulah kami dan ukuran font terlalu besar untuk memuat semuanya.
‫Jadi, jika kita melanjutkan dan melakukannya dengan 24 sekarang, itu ada di sana.
‫Jadi jika saya menjalankan kodenya, saya akan memiliki tombol multiwarna, yang memiliki beberapa blok teks berbeda di dalamnya.
‫Dan di sanalah kami.
‫Jadi supaya Anda lihat, ada beberapa pendekatan berbeda untuk melakukannya.
‫Jika Anda ingin mengambil beberapa aspek ke dalamnya, maka Anda dapat menggunakan panel ini.
‫Anda bahkan dapat menggunakan kisi di dalam tombol dan menggunakan tag kisi untuk membuat beberapa
‫kontrol berbeda di dalam tombol Anda.
‫Tapi itu adalah sesuatu yang akan kita bahas nanti.
‫Untuk saat ini, penting bagi Anda untuk memahami bahwa contoh memungkinkan Anda melakukan banyak hal
‫mewah dengan GUI Anda tanpa harus menarik dan melepas dan juga dengan kontrol penuh atas tampilan dan fungsinya.
‫Apa yang akan saya lakukan adalah saya akan mengomentarinya dan saya akan menunjukkan kepada Anda bagaimana melakukan hal yang sama seperti yang telah kita
‫lihat di sini dengan kode, karena kita telah melihatnya dengan kode Zemel.
‫Tapi kita juga bisa melakukannya dalam kode di belakang, yang berarti di C Sharp, yang kita pelajari cukup
‫banyak untuk seluruh kelas sejauh ini atau untuk keseluruhan kursus.
‫Jadi mari kita masuk ke kode di belakang.
‫Seperti yang Anda lihat, ada file contoh yang bagus, yang merupakan salah satu yang telah
‫kami buka di sini, demo jendela utama dan file contoh kami memiliki kode di belakang file, yang merupakan total Zemel.
‫File kasus itu dan yang ini adalah file C sharp, yang berarti kita memiliki kelas parsial C sharp di
‫sini, yang sekarang dapat kita gunakan untuk menyesuaikan atau membuat UI kita.
‫Dan seperti yang Anda lihat, itu disebut Jendela Utama dan mewarisi dari jendela.
‫Dan di sini kami memiliki metode yang disebut Jendela Utama, yang mirip dengan metode utama di aplikasi konsol kami yang telah
‫kami lihat sejauh ini.
‫Yang ini dipanggil segera setelah jendela terbuka atau segera setelah aplikasi dimulai.
‫Dan seperti yang Anda lihat di sini, ada komponen yang diinisialisasi yang disebut yang hanya menginisialisasi
‫semua hal lain yang diperlukan untuk menjalankan jendela kita.
‫Misalnya, itu menginisialisasi judul dan menginisialisasi ke ukuran dan sebagainya.
‫Dan sekarang kita dapat melanjutkan dan menulis kode kita sendiri di sini.
‫Jadi saya akan menunjukkan cara membuat tombol terlebih dahulu.
‫Jadi pertama-tama, kita membutuhkan kisi di mana kita dapat menetapkan tombol itu.
‫Jadi saya akan menyebutnya grid, yang merupakan grid baru.
‫Kemudian saya mengatakan konten ini ke grid saya, tetapi yang akan saya lakukan adalah saya hanya mengatakan jendela utama.
‫Itu harus memiliki beberapa konten.
‫Benar, seperti yang telah kita lihat pada contoh file.
‫Jadi jendela tag ini di sini terbuka dan semua yang ada di antara tag pembuka dan penutup itu adalah milik saya.
‫Jadi cukup banyak seluruh konten ini di sini.
‫Ini adalah isi dari jendela saya.
‫Dan apa yang saya katakan di sini adalah bahwa konten harus menjadi grid.
‫Jadi kita membuat grid baru seperti yang kita lihat di sini.
‫Jadi kami juga memiliki kisi di sini, yang seperti tag pembuka dan penutup kisi di sini.
‫Dan sekarang saya mengatakan itu sebagai isinya dan sekarang saya dapat menambahkan hal-hal ke grid ini.
‫Misalnya, saya dapat menambahkan tombol ke kisi.
‫Pertama-tama, mari kita buat tombol itu dan saya akan menyebutnya BGN akan menjadi tombol baru.
‫Sekarang saya memiliki tombol itu dan saya dapat menyesuaikan propertinya, jadi katakanlah saya ingin mengatur ukuran font tombol
‫saya dan saya dapat melakukannya dengan cara itu.
‫Saya hanya bisa mengatakan itu akan menjadi sekitar 26.
‫Sekarang, di tombol kami, seperti yang Anda lihat di sini, kami memiliki panel pembungkus, yang merupakan konten tombol.
‫Jadi yang akan saya lakukan adalah membuat panel untuk panel itu dan saya akan menyebutnya
‫panel akan menjadi panel pembungkus baru.
‫Sekarang kita dapat menambahkan sesuatu ke panel bungkus.
‫Kami menambahkan panel bungkus ke tombol dan kami menambahkan tombol buruk ke kisi.
‫Dan grid sudah menjadi bagian dari konten kami.
‫Jadi sekarang mari kita lanjutkan dan buat semua hal yang ingin kita tambahkan ke panel dan tambahkan ke dalamnya.
‫Jadi kita perlu blok teks terlebih dahulu.
‫Dan blok teks, seperti yang Anda lihat di sini, adalah yang ini di sini.
‫Jadi kami membuat satu, dua, tiga blok teks.
‫Yang pertama akan berada di 60 akan menjadi blok teks baru.
‫Dan saya hanya mengatakan teks teks.
‫Jadi ia memiliki prop teks. , teks ini di sini, yang merupakan konten.
‫Jadi untuk tombol, konten disebut konten dan untuk blok teks, teks itu sendiri disebut teks.
‫Jadi kami memiliki akses ke properti teks dari blok teks kami dan kami mengatakan itu ke multi.
‫Kemudian selanjutnya kita atur warnanya.
‫Jadi teks latar depan itu akan menjadi pemikiran kuas.
‫Dan warna apa yang saya miliki pertama untuk multi dan biru.
‫Baiklah.
‫Jadi saya akan membuatnya menjadi biru.
‫Dan seperti yang Anda lihat, kuas, teks dilakukan dengan kuas atau warna teks dilakukan dengan
‫kelas kuas.
‫Jadi saya perlu menggunakan kelas brushless ini dan kemudian mengakses warnanya.
‫Jadi kuas warna solid dari jenis kuas.
‫Dan selanjutnya saya dapat menambahkannya ke panel rec.
‫Jadi sekarang saya memiliki teks yang terhubung ke panel dan saya melakukannya dengan mengakses anak-anaknya dan menambahkan teks saya
‫ke dalamnya.
‫Jadi begitulah cara saya menambahkan satu blok teks.
‫Dan jika kami tidak menjalankannya, kami tidak akan melihat apa pun karena kami belum menambahkan panel rep ke
‫tombol dan juga tombol ke grid.
‫Tapi kita akan melakukannya dalam satu detik.
‫Jadi mari kita lanjutkan dan menyesuaikan teks atau benar-benar menyesuaikan ketiga bagian itu lagi.
‫Jadi apa yang kita lakukan selanjutnya kita hanya menambahkan teks ke multi-warna dan yang terakhir adalah tombol.
‫Dan sekarang kami memiliki warna merah dan kami memiliki warna putih.
‫Oke, jadi saya salin dan tempel ketiga baris itu karena mereka sama.
‫Saya tidak perlu membuat blok teks baru setiap kali saya menambahkan yang lama.
‫Dan kemudian saya menyesuaikan.
‫Atau sesuaikan nilainya dan sekali lagi ke panel merah.
‫Sekarang, jika ketiga teks di panel bungkus saya dan apa yang dapat saya lakukan sekarang adalah saya dapat menambahkan panel merah ke tombol saya.
‫Jadi tombol, konten itu akan menjadi panel merah saya dan akhirnya grid anak-anak, iklan itu.
‫Dan di sini saya menambahkan tombol saya.
‫Jadi itulah yang saya bicarakan.
‫Jadi kami memiliki kisi-kisi, kami memiliki tombol, kami memiliki panel pembungkus.
‫Dan sekarang kita menambahkan teks tersebut ke panel.
‫Kami menambahkan panel merah ke tombol, kami menambahkan tombol ke grid dan kami menambahkan grid ke jendela.
‫Dan seperti yang Anda lihat, ini adalah bagaimana Anda dapat melakukannya dengan kode.
‫Dan sebelum kita menjalankan kodenya, yang perlu saya lakukan sebenarnya adalah mengomentari gridnya juga.
‫Jadi saya sebenarnya hanya bisa memiliki jendela.
‫Jadi hanya ada jendela di satu jendela utama kami, misalnya, file dan semua kode lainnya ada di
‫dalam rakitan jendela utama kami yang ada, yang merupakan kode di belakang.
‫Jadi file ini adalah kode di balik jendela utama kita yaitu Zemel.
‫Sekarang ada satu hal yang hilang sebelum kita mengujinya, dan itu adalah bahwa saya menetapkan blok pajak baru untuk teks
‫saya.
‫Jadi saya perlu melakukan itu untuk kedua teks saya.
‫Jadi masalahnya adalah kami membuat teks di sini dan kami menginisialisasi dengan blok teks baru.
‫Dan sekarang kita perlu membuat blok teks baru dan menetapkannya ke teks kita sebelum kita dapat menambahkannya ke panel perwakilan
‫kita.
‫Jadi sekarang kita sudah bisa menjalankan kodenya.
‫Dan kita akan melihat bahwa kita juga memiliki tombol multicolor, dan seperti yang Anda lihat, kita telah melakukan hal yang
‫sama yang telah kita lakukan sebelumnya dengan Zemo, yang ini di sini, yang juga terlihat cukup sederhana dan rapi.
‫Kami melakukannya dengan kode tajam C seperti itu.
‫Sekarang Anda dapat pergi dengan cara yang Anda inginkan, tetapi kami terutama akan bekerja dengan Zemel.
‫Saya hanya ingin menunjukkan kepada Anda bahwa Anda dapat melakukan apa pun dengan mereka, semua yang dapat Anda lakukan dengan kode di belakang
‫juga.
‫Tetapi terkadang lebih masuk akal untuk menggunakan kode di belakang.
‫Jadi, misalnya, jika Anda ingin menambahkan sesuatu secara dinamis, maka kode di belakangnya lebih masuk akal.
‫Jadi menjalankannya dengan C sharp atau membuat penyesuaian dengan C Sharp dan Zemel lebih masuk akal
‫bila Anda memiliki antarmuka pengguna statis.
‫Dan omong-omong, setiap kali Anda membuat file Zemel seperti yang kami miliki di sini, yang dilakukannya adalah melanjutkan
‫dan membuat kode ini di belakang file.
‫Jadi itu hanya membuat kode ini dan menjalankannya setelah aplikasi mulai berjalan, setelah jendela utama kita
‫tertangkap.
‫Jadi itu dilakukan.
‫Dan kami melakukannya seperti itu dengan Zemo atau kami melakukannya secara manual dengan membuat kode.
‫Jadi sekarang Anda tentu saja bisa berdebat, hei, ada sesuatu seperti ini dengan dan memutuskan mana yang belum Anda katakan, yah,
‫saya bisa melakukannya dengan sangat mudah di sini.
‫Saya hanya bisa mengatakan tombol lebar itu dan saya bisa mengaturnya ke seratus lima puluh dan tombol itu
‫tinggi dan set ke seratus misalnya.
‫Kemudian tombol akan disesuaikan.
‫Dan seperti yang Anda lihat sekarang, itu sudah tersebar di dua baris, jadi itu Zemel dan kode di belakang dengan kode.
‫Saya tahu ini adalah video yang panjang, tetapi kita akan melihat hal-hal keren yang lebih keren di video berikutnya.
‫Jadi saya akan melihat Anda di sana.