Pada artikel kali ini saya akan menjelaskan bagaimana menggunakan Context Action yang ada di dalam kontrol ListView.
Context Action adalah tombol berupa bar yang akan muncul ketika pengguna melakukan left-swiped pada iOS dan long-pressed pada Android.
1. Tambahkan halaman xaml baru dengan nama ListViewContextAction.xaml, kemudian tambahkan kode berikut:
<?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="Bab3.ListViewContextAction">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<OnPlatform.iOS>10,20,10,5</OnPlatform.iOS>
<OnPlatform.Android>10,5,10,5</OnPlatform.Android>
</OnPlatform>
</ContentPage.Padding>
<ListView ItemsSource="{Binding ListItems}" RowHeight="100" BackgroundColor="Black" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="More" Command="{Binding MoreCommand}" />
<MenuItem Text="Delete" Command="{Binding DeleteCommand}" IsDestructive="True" />
</ViewCell.ContextActions>
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal" Padding="5,10,5,15">
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Vertical">
<Label HorizontalOptions="Start" FontSize="20" FontAttributes="Bold" TextColor="White" Text="{Binding Title}"/>
<Label HorizontalOptions="Start" FontSize="12" FontAttributes="Bold" TextColor="White" Text="{Binding Description}"/>
</StackLayout>
<Label HorizontalOptions="End" FontSize="25" TextColor="Aqua" Text="{Binding Price}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
2. Buat class ListItem yang diturunkan dari BindableObject
public class ListItem : BindableObject
{
public string Source { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public string Price { get; set; }
private Command moreCommand;
public Command MoreCommand
{
get { return moreCommand; }
set { moreCommand = value; OnPropertyChanged("MoreCommand"); }
}
private Command deleteCommand;
public Command DeleteCommand
{
get { return deleteCommand; }
set { deleteCommand = value; OnPropertyChanged("DeleteCommand"); }
}
public ListItem()
{
MoreCommand = new Command(MoreRequested);
deleteCommand = new Command(DeleteRequested);
}
void MoreRequested()
{
MessagingCenter.Send<ListItem>(this, "MoreRequested");
}
void DeleteRequested()
{
MessagingCenter.Send<ListItem>(this, "DeleteRequested");
}
}
3. Buat class ViewModel untuk membinding data pada kontrol ListView.
public class ListViewContextActionViewModel : BindableObject
{
readonly Func<string, string, string, Task> displayAlertAction;
private List<ListItem> listItems;
public List<ListItem> ListItems
{
get { return listItems; }
set { listItems = value; OnPropertyChanged("ListItems"); }
}
public ListViewContextActionViewModel(Func<string, string, string, Task> displayAlertAction)
{
this.displayAlertAction = displayAlertAction;
ListItems = new List<ListItem> {
new ListItem {Title = "First", Description="1st item", Price="$100.00"},
new ListItem {Title = "Second", Description="2nd item", Price="$200.00"},
new ListItem {Title = "Third", Description="3rd item", Price="$300.00"}
};
MessagingCenter.Subscribe<ListItem>(this, "MoreRequested", MoreRequested);
MessagingCenter.Subscribe<ListItem>(this, "DeleteRequested", DeleteRequested);
}
void MoreRequested(ListItem listItem)
{
displayAlertAction.Invoke("More", listItem.Title + " more was clicked", "OK");
}
void DeleteRequested(ListItem listItem)
{
displayAlertAction.Invoke("Delete", listItem.Title + " delete was clicked", "OK");
}
}
3. Terakhir tambahkan kode berikut pada file ListViewContextAction.xaml.cs
public partial class ListViewContextAction : ContentPage
{
public ListViewContextAction()
{
InitializeComponent();
BindingContext = new ListViewContextActionViewModel(DisplayAlert);
}
}
4. Jalankan program, maka anda dapat melihat hasilnya sebagai berikut:
Erick Kurniawan 