Sebelumnya mungkin artikel ini agak terlambat rilisnya dikarenakan saya saat ini sedang praktikum dengan setumpuk laporan (curhat dikit) :D
Kali ini saya akan membahas pembuatan splitview pada aplikasi Windows 10 (Universal Windows Platform), selanjutnya disebut dengan uwp. Sebelum ini saya mencari artikel dan video tutorial tentang pembuatan splitview tapi semua yang didapat dari hasil riset itu sudah masuk ke tingkat sesepuh -_-
Langsung aja ya, siapin Visual Studio 2015 yang sudah di install lengkap dengan Tools Universal Windows Apps (harus & wajib ada), SDK Windows 10(ini juga harus ada), sama Emulator Windows 10 (Ini optional, kecuali gak punya hp Windows Phone ini jadi wajib). Buat yang terkendala sama uang bisa saya saranin pakai Visual Studio Community (ini gratis), fiturnya hampir setara sama Visual Studio Enterprise (ini bayar)
Sekarang kita mulai, buka Visual Studio trus klik “new project” lalu pilih Blank App seperti pada gambar dibawah
Kali ini saya akan membahas pembuatan splitview pada aplikasi Windows 10 (Universal Windows Platform), selanjutnya disebut dengan uwp. Sebelum ini saya mencari artikel dan video tutorial tentang pembuatan splitview tapi semua yang didapat dari hasil riset itu sudah masuk ke tingkat sesepuh -_-
Langsung aja ya, siapin Visual Studio 2015 yang sudah di install lengkap dengan Tools Universal Windows Apps (harus & wajib ada), SDK Windows 10(ini juga harus ada), sama Emulator Windows 10 (Ini optional, kecuali gak punya hp Windows Phone ini jadi wajib). Buat yang terkendala sama uang bisa saya saranin pakai Visual Studio Community (ini gratis), fiturnya hampir setara sama Visual Studio Enterprise (ini bayar)
Sekarang kita mulai, buka Visual Studio trus klik “new project” lalu pilih Blank App seperti pada gambar dibawah
Setelah bisa membuat project baru, sekarang buka MainPage.xaml
Akan tampil seperti ini karena masih kosong belum di isi script sama sekali.
Sekarang pada bagian dalam grid kita tambahkan script untuk splitview. O ya, perintah dasar splitview adalah seperti ini
Sekarang pada bagian dalam grid kita tambahkan script untuk splitview. O ya, perintah dasar splitview adalah seperti ini
Sekarang untuk memberi tanda bahwa ini adalah halaman percobaan splitview kita beri text pada bagian dalam dari splitview ini. Pada SplitView.Content kita tambahkan text seperti ini
Nanti akan terlihat seperti ini
Sekarang kita ke splitview identifier tadi, beri tanda pengenal untuk si splitview dari tinggi, lebar, nama, dan lain lain (lucu aja kalo gak punya identitas trus mau dipanggil, malah ntar jadi bingung sendiri pas mau manggil gara gara gak tau namanya). Berikan identitas seperti ini
Lalu tambahkan pewarnaan untuk background si splitview ini dengan perintah seperti ini
Sekarang saatnya makan :D (eh, maksudnya menambahkan tombol yang bentuknya kaya burger). Lihat script yang tadi trus di bagian dalam stackpanel yang dikasih warna biru itu kita masukin scriptnya
Lalu tambahin ini untuk tombol-tombol lainnya yang ada dibawah tombol burger tadi (aku gak tau namanya apaan, jadi kubilang aja burger) :D
Sekarang ke MainPage.xaml.cs (source code inti dari halaman ini) trus ke bagian script ini ke tombol burger (gue suka tombol burger, bikin laper soalnya :D )
O ya hampir lupa, tambahin perintah ini dulu sebelum di running aplikasinya (lari lu, jangan jalan) biar si splitview bisa nyesuain sama keadaan form (entah formnya besar, sedang, atau kecil)
Setelah rangkum semuanya, sekarang saatnya pengujian. Coba jalankan (jalan aja, gak usah lari)
Ketika ukurannya diperbesar, si splitview akan otomatis ikut membesar juga. Tapi bisa juga kok secara manual ngelebarin lokasinya dengan cara klik si burger
0 Comments