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.
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Daftar SekarangApasih 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
Setelah berhasil di install, silahkan buka Syncfusion Control Panel. Tapilannya seperti gambar dibawah ini
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 :
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.
- Mengontrol Navigarion Drawer.
Navigation Drawer dapat dicontrol melalui kode C# maupun XAML. Nah disini akan saya contohkan dengan menggunakan XAML.
|
1 |
<xmlns:navigation="clr-namespace:Syncfusion.SfNavigationDrawer.XForms;assembly=Syncfusion.SfNavigationDrawer.XForms"/> |
Selanjutnya tambahkan SfNavigationDrawer :
|
1 |
<navigation:SfNavigationDrawer x:Name="navigationDrawer"/> |
|
1 |
<navigation:SfNavigationDrawer x:Name="navigationDrawer" DrawerWidth="300" /> |
Untuk mengatur posisi Navigation Drawer gunakanlah properti Position :
|
1 |
<navigation:SfNavigationDrawer x:Name="navigationDrawer" Position="Left" Transition="SlideOnTop" DrawerWidth="300"> |
|
1 2 3 |
<navigation:SfNavigationDrawer.DrawerContentView> <Label x:Name="home" Text="Home"/> </navigation:SfNavigationDrawer.DrawerContentView> |
Untuk menambahkan header pada Navigation Drawer menggunakan DrawerHeaderView :
|
1 2 3 4 5 |
<navigation:SfNavigationDrawer.DrawerHeaderView> <Grid x:Name="headerLayout" BackgroundColor="#1aa1d6" > <Label x:Name="header" Text="Dicoding" FontSize="14" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </Grid> </navigation:SfNavigationDrawer.DrawerHeaderView> |
|
1 2 3 4 5 6 7 8 9 10 |
<navigation:SfNavigationDrawer.ContentView> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Label x:Name="ContentHeader" Text="Content View" BackgroundColor="#1aa1d6" FontSize="14" TextColor="White" VerticalOptions="StartAndExpand" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" /> <Button Text="Show Menu" Grid.Row="1" BackgroundColor="#1aa1d6" x:Name="Btnmenu" HorizontalOptions="Center" VerticalOptions="Center" ></Button> </Grid> </navigation:SfNavigationDrawer.ContentView> |
Selesai, untuk kode XAML lengkapnya seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:navigation="clr-namespace:Syncfusion.SfNavigationDrawer.XForms;assembly=Syncfusion.SfNavigationDrawer.XForms" xmlns:local="clr-namespace:Syncfusion" x:Class="Syncfusion.MainPage"> <navigation:SfNavigationDrawer x:Name="navigationDrawer" Position="Left" Transition="SlideOnTop" DrawerWidth="200" DrawerHeaderHeight="50" DrawerFooterHeight="0"> <navigation:SfNavigationDrawer.ContentView> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Label x:Name="ContentHeader" Text="Content View" BackgroundColor="#1aa1d6" FontSize="14" TextColor="White" VerticalOptions="StartAndExpand" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" /> <Button Text="Show Menu" Grid.Row="1" BackgroundColor="#1aa1d6" x:Name="Btnmenu" HorizontalOptions="Center" VerticalOptions="Center" ></Button> </Grid> </navigation:SfNavigationDrawer.ContentView> <navigation:SfNavigationDrawer.DrawerHeaderView> <Grid x:Name="headerLayout" BackgroundColor="#1aa1d6" > <Label x:Name="header" Text="Dicoding" FontSize="14" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </Grid> </navigation:SfNavigationDrawer.DrawerHeaderView> <navigation:SfNavigationDrawer.DrawerContentView> <Label x:Name="home" Text="Home"/> </navigation:SfNavigationDrawer.DrawerContentView> </navigation:SfNavigationDrawer> </ContentPage> |
Sekarang run aplikasi pada device kamu dan lihat hasilnya :
