Membuat Navigation Drawer di Xamarin Menggunakan Framework dari Syncfusion

Hi devs, baru baru ini Dicoding telah merilis akademi baru tentang Belajar Membangun Aplikasi Multi-platform. Teman-teman bisa belajar materi yang sangat lengkap di akademi tersebut. Nah, pada postingan kali ini saya akan berbagi tutorial tentang bagaimana caranya membuat Navigation Drawer di Xamarin menggunakan framework tambahan dari Syncfusion.

Apasih Navigation Drawer itu?

Navigation Drawer adalah  salah satu komponen navigasi menu atau biasa disebut sliding menu yang berfungsi untuk menampilkan konten menu didalam aplikasi kita.

Lalu apa itu Syncfusion?

Syncfusion adalah sebuah perusahaan teknologi yang mempunyai beberapa layanan teknologi. Syncfusion memiliki beberapa produk salah satunya adalah adalah component and framework yang didalamnya terdapat berbagai framework untuk mengembangkan aplikasi Web, Dekstop, Mobile, dll. Pada tutorial ini kita akan menggunakan framework Xamarin.Form.

Latihan

Oke langsung saja kita mulai dengan langkah-langkah berikut :

  • Download Syncfusion Essential Studio for Xamarin.

Silahkan download dan install versi trialnya di https://www.syncfusion.com/products/xamarin

capture

Setelah berhasil di install, silahkan buka Syncfusion Control Panel. Tapilannya seperti gambar dibawah ini

capture-1

Terlihat digambar tersebut kamu memiliki masa trial selama 30 hari. Disana terdapat tab documentation yang bisa kamu gunakan untuk mempelajari framework apa saja yang bisa dipakai dalam membuat aplikasi menggunakan Xamarin. Klik tombol explore maka akan terbuka jendela explorer yang berisi kumpulan library dan sample.

  • Menambahkan SfNavigationDrawer pada project solutions.

Setelah kamu membuat project baru di Visual Studio. Maka untuk membuat Navigation Drawer pada aplikasi yang kamu buat kamu perlu menambahkan assembly reference pada project tersebut. Caranya mudah, cukup klik kanan pada project Android / IOS – Add – Reference kemudian akan muncul jendela seperti ini :

capture-2

Klik tombol Browse kemudian pilih beberapa library SfNavigationDrawer dari folder lib hasil kamu menginstal Syncfusion Essential Studio tadi. Klik oke dan oke lagi maka ketiga library tadi akan ditambahkan kedalam project kamu.

capture-3

Klik oke dan oke lagi maka ketiga library tadi akan ditambahkan kedalam project kamu.
  • Mengontrol Navigarion Drawer.

Navigation Drawer dapat dicontrol melalui kode C# maupun XAML. Nah disini akan saya contohkan dengan menggunakan XAML.

Pertama tambahkan namespace ini :

Selanjutnya tambahkan SfNavigationDrawer :

Untuk mengatur tinggi dan lebar dari Navigation Drawer, gunakan properti DrawerHeight dan DrawerWidth :

Untuk mengatur posisi Navigation Drawer gunakanlah properti Position :

Menambahkan menu Navigation Drawer dengan DrawerContentView :

Untuk menambahkan header pada Navigation Drawer menggunakan DrawerHeaderView :

Untuk menambahkan konten pada halaman utama menggunakan ContentView :

Selesai, untuk kode XAML lengkapnya seperti ini :

Sekarang run aplikasi pada device kamu dan lihat hasilnya :

videotogif_2017-04-20_23-24-031

Tutorial lengkap untuk Belajar Membangun Aplikasi Multi-platform dapat kamu pelajari lebih dalam di link https://www.dicoding.com/academies/20 

Belajar mengembangkan aplikasi atau game dengan kurikulum yang telah divalidasi langsung oleh industri dengan Dicoding Academy.

Belajar di Dicoding Sekarang →
Share this:

Head of Reviewer, Dicoding

Leave a comment