Xamarin Shell: Shell Navigation

Xamarin Shell mempunyai URI-based navigation yang menggunakan mekanisme routes sehingga kita dapat berpindah navigasi tanpa harus mengikuti mekanisme navigasi hirarki standard.

1. Pada aplikasi yang sudah kita buat sebelumnya, tambahkan code behind sebagai berikut:

        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute("liststring", typeof(BindingListString));
            Routing.RegisterRoute("imagecell", typeof(ListViewImageCell));
            Routing.RegisterRoute("datamodel", typeof(BindingToDataModel));
            Routing.RegisterRoute("customlist", typeof(ListViewCustom));
        }

2. Kemudian pada bagian xaml tambahkan route berikut ini:

    <FlyoutItem Title="List Sample"
                FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Tab Menu">
            <ShellContent Title="Binding List" Route="liststring">
                <views:BindingListString/>
            </ShellContent>
            <ShellContent Title="Image Cell" Route="imagecell">
                <views:ListViewImageCell />
            </ShellContent>
        </Tab>
        <ShellContent Title="Binding List String" Route="liststring">
            <views:BindingListString />
        </ShellContent>
        <ShellContent Title="Binding Data Model" Route="datamodel">
            <views:BindingToDataModel />
        </ShellContent>
        <ShellContent Title="Custom ListView" Route="customlist">
            <views:ListViewCustom />
        </ShellContent>
    </FlyoutItem>

3. Pada halaman BindingListString yang sudah dibuat sebelumnya tambahkan tmbol untuk navigasi halaman.

        <StackLayout>
            <Button x:Name="btnImageCell" 
                    Text="Ke Halaman Image Cell" Clicked="btnImageCell_Clicked" />
            <ListView x:Name="listView" />
        </StackLayout>

4. Untuk navigasi dengan menggunakan route yang sudah dibuat, anda dapat menambahkan perintah berikut ini:

        private async void btnImageCell_Clicked(object sender, EventArgs e)
        {
            await Shell.Current.GoToAsync("imagecell");
        }

image

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s