Xamarin.Forms 4.0 memperkenalkan fitur-fitur baru yang luar biasa untuk membantu merampingkan pengembangan saat membangun aplikasi mobile yang cantik dengan C #. Penekanan utama adalah Xamarin.Forms Shell baru, yang berupaya mengurangi kerumitan membangun aplikasi mobile dengan menyediakan fitur arsitektur aplikasi mendasar. Seperti hierarki visual, navigasi, routing berbasis URI, dan penanganan pencarian terintegrasi.
Pada tutorial ini anda akan melihat betapa mudahnya memasang fitur shell pada aplikasi Xamarin. Bentuk Shell dengan berbagai jenis skema navigasi dan cara menavigasi ke sub-halaman.
1. Untuk membuat shell dari awal, anda dapat membuat project baru kemudian pilih template untuk membuat shell seperti gambar dibawah ini.
2. Namun jika anda sudah memiliki project Xamarin Forms, maka anda dapat menambahkan Shell dengan cara menambahkan halaman xaml yang diturunkan dari class Shell.
3. Pada Xamarin Forms project tambahkan xaml baru dengan nama AppShell.xaml
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Latihan1.AppShell">
</Shell>
4. Kemudian pada code behind tambahkan kode sebagai berikut:
public partial class AppShell : Shell
{
public AppShell()
{
InitializeComponent();
}
}
5. Kemudian pada App class tambahkan kode berikut ini untuk membuka shell pertama kali.
public App()
{
InitializeComponent();
MainPage = new AppShell();
}
6. Untuk menambahkan menu anda dapat menggunakan FlyoutItem atau menggunakan TabBar.
7. Untuk menampilkan menu yang dapat di slide di sebelah kiri, anda dapat menggunakan flyout item. Kodenya adalah sebagai berikut:
<Shell ---------
xmlns:views="clr-namespace:Latihan1.Bab3">
<FlyoutItem Title="List Sample"
FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Title="Binding List String">
<views:BindingListString />
</ShellContent>
<ShellContent Title="Binding Data Model">
<views:BindingToDataModel />
</ShellContent>
<ShellContent Title="Custom ListView">
<views:ListViewCustom />
</ShellContent>
</FlyoutItem>
</Shell>
8. Tampilannya dapat dilihat sebagai berikut:
9. Menu yang ditmbahkan bisa juga berupa tab.
<FlyoutItem Title="List Sample"
FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="Tab Menu">
<ShellContent Title="Binding List">
<views:BindingListString/>
</ShellContent>
<ShellContent Title="Image Cell">
<views:ListViewImageCell />
</ShellContent>
</Tab>
<ShellContent Title="Binding List String">
<views:BindingListString />
</ShellContent>
<ShellContent Title="Binding Data Model">
<views:BindingToDataModel />
</ShellContent>
<ShellContent Title="Custom ListView">
<views:ListViewCustom />
</ShellContent>
</FlyoutItem>
10. Anda dapat melihat tampilannya sebagai berikut:
Erick Kurniawan 