Peringatan: Artikel ini dikategorikan sebagai archived. Artinya artikel ini tidak akan dirawat, diperbarui, ataupun dijadikan sebagai bahan diskusi.
Jika kamu perhatikan, ada bagian apa saja pada tampilan ‘fisik’ sebuah aplikasi? Dari kita mulai meng-install aplikasi hingga kita memakainya, ada sesuatu yang harus kita klik padanya, dan ada sesuatu yang harus kita isi dengan mengetik padanya. Elemen-elemen kontrol (control elements) seperti kotak teks (text box), tombol (button), menu dropdown, radio button, check box, merupakan elemen yang rasanya sudah wajib hadir pada suatu aplikasi.
Setelah sebelumnya saya membahas tentang cara mengatur nama, deskripsi dan logo aplikasi, sekarang, pada tutorial UWP bagian ketiga ini, saya akan melanjutkan dengan membahas cara menambahkan elemen kontrol (control elements) di aplikasi Windows 10 UWP.
I don’t want to upgrade my PC to Windows 10!
Baca tutorial sebelumnya: Cara Mengatur Nama, Deskripsi, dan Logo (Visual Assets) Aplikasi UWP
Mari kita mulai dari panel Solution Explorer yang terletak di sebelah kanan. Di sana, klik ganda file bernama MainPage.xaml untuk memunculkannya di code editor.
MainPage.xaml adalah file tempat kita mengatur tampilan aplikasi, menambahkan elemen kontrol (control elements) ke aplikasi, dan juga mengatur behavior pada elemen aplikasi yang ada.
MainPage.xaml sendiri memiliki dua panel editor, yaitu panel XAML dan Design.
Panel XAML merupakan panel editor kode yang berisi code XAML khusus untuk menambahkan elemen dengan kodingan bahasa XAML. Sedangkan panel Design adalah panel editor desain yang memungkinkan kita untuk melihat preview aplikasi dan mengatur elemen aplkasi secara langsung dengan drag-drop-resize. Dengan kata lain, dapat disebut sebagai WYSIWYG-nya si panel XAML tadi.
Masih sama seperti pada tutorial sebelumnya, sekarang kita masih belum bermain dengan kodingan, kita hanya akan bermain di panel Design saja.
Karena panel yang aktif saat pertama kali membuka MainPage.xaml adalah panel XAML, kita harus mengubahnya menjadi panel Design yang aktif. Caranya, klik tombol panah dua arah yang berada di antara tab panel XAML dan Design.
Dan sekarang kamu pun berada di panel Design. Di sana terlihat persegi kanvas putih yang merupakan layout aplikasi yang dapat kamu tambahkan dengan elemen kontrol sesukamu.
Sekarang kita akan menambahkan elemen kontrol XAML (control elements) ke layout aplikasi.
Elemen kontrol dapat ditemukan di panel Toolbox. Untuk memunculkannya, klik tab Toolbox di sebelah kiri jendela Visual Studio.
Untuk menambahkan elemen kontrol ke layout aplikasi, klik ganda pada suatu elemen atau drag and drop elemen ke layout aplikasi.
Pada contoh, ketika menambahkan elemen TextBox dengan klik ganda, maka hasilnya akan tampak seperti Gambar 6.
Sekarang kita atur properti elemen TextBox tersebut.
Pertama kita akan mengatur posisi elemennya menjadi rata tengah horizontal. Klik pada elemen yang dituju, lalu lihat panel Properties di sebelah kanan jendela Visual Studio di bawah Solution Explorer. Pada properti HorizontalAlignment, klik icon yang menunjukkan posisi rata tengah (Center), seperti yang terlihat di Gambar 7.
Sekarang elemen TextBox sudah berada di tengah seperti yang tampak pada Gambar 8.
Sudah cukup dengan menambahkan satu elemen, sekarang kita akan mencoba membuat form log in dummy di aplikasi Windows 10 UWP ini.
Sebelumnya kita hapus dulu element TextBox yang tadi ditambahkan dengan mengeklik pada elemen tersebut dan klik Delete pada keyboard, atau klik kanan pada elemen dan pilih Delete.
Sampai saat ini saya sudah menjelaskan bagaimana cara menambakan elemen dan mengatur propertinya. Sekarang saya serahkan pada kamu sendiri untuk membuat form log in ini, tentunya dengan nilai-nilai properti yang sudah saya siapkan pada Tabel 1 untuk kamu ikuti. Terdapat 4 elemen yang akan ditambahkan, yaitu TextBox, PasswordBox, CheckBox, dan Button.
| Nama Elemen | Properti | ||||
|---|---|---|---|---|---|
| Horizontal Alignment | Margin (Top) | Width | Text/Content | Placeholder Text | |
TextBox | 200 | 200 | (no value) | Username | |
PasswordBox | 240 | 200 | (no value) | Password | |
CheckBox | Center | 290 | (no value) | Remember me | |
Button | 360 | (no value) | Log In | ||
Kalau kamu kebingungan mana itu properti Margin (Top) dan PlaceholderText, lihat pada Gambar 9 dan 10.
Sudah selesai? Jika kamu melakukannya dengan benar, maka layout aplikasi akan tampak seperti pada Gambar 11.
Setelah selesai membuat form log in, mari kita deploy aplikasinya di Local Machine dan Emulator Windows 10 Mobile.
Untuk hasil deploy di Local Machine, form log in akan tampak seperti pada Gambar 12. Sedangkan untuk di Windows 10 Mobile, lihatlah Gambar 13.
Sangat mudah bukan? Dengan langkah sesimpel itu, kamu sudah bisa membuat form log in dummy di dalam aplikasi Windows 10 UWP buatan kamu sendiri.
Tidak lupa, di bawah ini saya lampirkan juga source code project dan App Packages untuk tutorial ini bagi kamu yang ingin mencobanya langsung tanpa mengikuti tutorial ini.
Baca tutorial selanjutnya: Menambahkan Event Handler pada Elemen Kontrol Aplikasi UWP
Sekian dari saya tentang tutorial bagian ketiga yang menjelaskan cara menambahkan elemen kontrol (control elements) ke aplikasi Windows 10 UWP. Jika kamu punya pertanyaan ataupun masalah mengenai tutorial ini, jangan lupa untuk menulisnya di kolom komentar artikel ini. Terima kasih dan sampai berjumpa di tutorial selanjutnya!
