Xamarin Form juga mendukung Modal Form. Ada tiga pilihan dalam menggunakan navigasi berbasis Modal yaitu:
- NavigationPage untuk full-page modals.
- Alert untuk notifikasi pengguna.
- Action sheet untuk pop-up menu.
Dengan menggunakan modal form anda dapat menampilkan halaman full-screen. Ketika modal form ditampilkan, maka navigation bar tidak akan ditampilkan sampai form modal tersebut ditutup.
1. Buat halaman xaml baru dengan nama ModalPage.xaml.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage Title="Contoh Modal" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Bab4.ModalPage">
<ContentPage.Content>
<StackLayout>
<Label Text="First Page" FontSize="40" />
<Button Text="Go to Second Page Modally" Clicked="Navigate" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
2. Tambahkan kode berikut untuk memanggil halaman modal.
public partial class ModalPage : ContentPage
{
public ModalPage()
{
InitializeComponent();
}
protected async void Navigate(object sender, EventArgs args)
{
await Navigation.PushModalAsync(new ModalSecondPage(), false);
}
}
3. Untuk halaman yang dipanggil buat halaman xaml baru dengan nama ModalSecondPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Bab4.ModalSecondPage">
<ContentPage.Content>
<StackLayout>
<Label Text="Second Page" FontSize="40" />
<Button Text="Pop back to First Page" Clicked="Navigate" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
4. Kemudian tambahkan kode berikut untuk menutup form modal.
public partial class ModalSecondPage : ContentPage
{
public ModalSecondPage()
{
InitializeComponent();
}
protected async void Navigate(object sender, EventArgs args)
{
await Navigation.PopModalAsync();
}
}
5. Tampilan modal form dapat dilihat pada gambar berikut.
Contoh Kompleks Modal Forms
Pada contoh kedua akan ditunjukan cara penggunaan modal form yang lebih kompleks untuk menampilkan ListView dan detail berupa modal form.
1. Buat halaman utama dengan nama MainModalPage.xaml.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Bab4.MainModalPage" Title="Contacts">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" />
</ContentPage.Padding>
<ContentPage.Content>
<StackLayout>
<ListView x:Name="listView" ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" Detail="{Binding Country}" DetailColor="Red" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
2. Pada project portable, tambahkan class Contact.cs, dan tulis kode berikut:
public class Contact
{
public string Name { get; set; }
public int Age { get; set; }
public string Occupation { get; set; }
public string Country { get; set; }
}
3. Kemudian tambahkan kode berikut pada MainModalPage.xaml.cs.
public partial class MainModalPage : ContentPage
{
List<Contact> contacts;
public MainModalPage()
{
InitializeComponent();
SetupData();
listView.ItemsSource = contacts;
}
async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
if (listView.SelectedItem != null)
{
var detailPage = new DetailPage();
detailPage.BindingContext = e.SelectedItem as Contact;
listView.SelectedItem = null;
await Navigation.PushModalAsync(detailPage);
}
}
void SetupData()
{
contacts = new List<Contact>();
contacts.Add(new Contact
{
Name = "Erick Kurniawan",
Age = 30,
Occupation = "Trainer",
Country = "Indonesia"
});
contacts.Add(new Contact
{
Name = "Bambang Supeno",
Age = 34,
Occupation = "Developer",
Country = "Indonesia"
});
contacts.Add(new Contact
{
Name = “Budi Sutejo",
Age = 52,
Occupation = "Project Manager",
Country = "Indonesia"
});
contacts.Add(new Contact
{
Name = "Cody Cock",
Age = 55,
Occupation = "Frontend Developer",
Country = "United State"
});
contacts.Add(new Contact
{
Name = "Tan Thie Tu",
Age = 19,
Occupation = "Junior Developer",
Country = "Vietnam"
});
}
}
4. Untuk menampilkan form modal buat halaman DetailPage.xaml.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Bab4.DetailPage">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" />
</ContentPage.Padding>
<ContentPage.Content>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<StackLayout Orientation="Horizontal">
<Label Text="Name:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Name}" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Age:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Age}" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Occupation:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Occupation}" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Country:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Country}" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
<Button x:Name="dismissButton" Text="Dismiss" Clicked="OnDismissButtonClicked" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
5. Kemudian tambahka juga kode pada halaman DetailPage.xaml.cs.
public partial class DetailPage : ContentPage
{
public DetailPage()
{
InitializeComponent();
}
async void OnDismissButtonClicked(object sender, EventArgs args)
{
await Navigation.PopModalAsync();
}
}
6. Tampilan contoh modal form dapat dilihat pada gambar berikut.
Erick Kurniawan 